document.createElement

document.createElement()的用法

 

      document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合使用。其中,appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。

 

      下面,举例说明document.createElement()的用法。<div id="board"></div>

 

例1:

        

    <script type="text/javascript">var id= document.getElementById("id");var btn = document.createElement("input");btn.type = "button";btn.value = "这是测试加载的小例子";var inbtn= id.appendChild(btn);</script>

  

效果:在标签board中加载一个按钮,属性值为“这是测试加载的小例子”。 

      

例2:

        

<script type="text/javascript">var board = document.getElementById("board");var e3 = document.createElement("input");e4.setAttribute("type", "text");e4.setAttribute("name", "q");e4.setAttribute("value", "使用setAttribute");e4.setAttribute("onclick", "javascript:alert('This is a test!');");var object = board.appendChild(e3);
</script>

  

效果:在标签board中加载一个文本框,属性值为“使用setAttribute”。 当点击这个文本框时,会弹出对话框“This is a test!”。

 

        根据上面例子,可以看出,可以通过加载对象的属性来设置,参数是相同的。使用e.type="text" 和 e.setAttribute("type","text")效果是一致的。

       

        下面,我们用实例来讲述一下appendChild() 方法和insertBefore() 方法的不同

        比如我们要在下面这个div中插入一个子节点P时:<div id="test"><p id="x1">Node</p><p>Node</p></div>

我们可以这样写:

<script type="text/javascript">var oTest = document.getElementById("test");var newNode = document.createElement("p");newNode.innerHTML = "This is a test";//测试从这里开始//appendChild方法:oTest.appendChild(newNode);//insertBefore方法:oTest.insertBefore(newNode,null);
</script>

  

      通过以上的代码,可以测试到一个新的节点被创建到了节点div下,且该节点是div最后一个节点。很明显,通过这个例子,可以知道appendChildhild和insertBefore都可以进行插入节点的操作。

   在上面的例子中有这样一句代码:oTest.insertBefore(newNode,null) ,这里insertBefore有2个参数可以设置,第一个是和appendChild相同的,第二却是它特有的。它不仅可以为null,还可以为:

<script type="text/javascript">var oTest = document.getElementById("test");var refChild = document.getElementById("x1");var newNode = document.createElement("p");newNode.innerHTML = "This is a test";oTest.insertBefore(newNode,refChild);
</script>

  

效果:这个例子将在x1节点前面插入一个新的节点

 

又或:

<script type="text/javascript">var oTest = document.getElementById("test");var refChild = document.getElementById("x1");var newNode = document.createElement("p");newNode.innerHTML = "This is a test";oTest.insertBefore(newNode,refChild.nextSibling);
</script>

  

效果:这个例子将在x1节点的下一个节点前面插入一个新的节点

 

还可为:

<script type="text/javascript">var oTest = document.getElementById("test");var newNode = document.createElement("p");newNode.innerHTML = "This is a test";oTest.insertBefore(newNode,oTest.childNodes[0]);  
</script>

  

  这个例子将在第一子节点前面插入一个新的节点,也可以通过改变childNodes[0,1,...]来在其它位置插入新的节点

由于可见insertBefore()方法的特性是在已有的子节点前面插入新的节点,但例一中使用insertBefore()方法也可以在子节点列表末插入新节点的。两种情况结合起来,发现insertBefore()方法插入节点,是可以在子节点列表的任意位置。

  从这几个例子中得出:

  appendChild() 方法在节点的子节点列表末添加新的子节点。

  insertBefore() 方法在节点的子节点列表任意位置插入新的节点。

 

//创建img对象var newspan = document.createElement("img");//创建img对象
//设置img对象css样式newspan.style.position = "absolute";newspan.style.right=0;newspan.cssFloat='right';newspan.style.right=0;newspan.style.top="31px";newspan.style.cursor="pointer";newspan.src = 'http://lvyou.elong.com/static/swfupload/images/detele.gif';
//设置img对象onclick newspan.onclick = function() {if (confirm('确认要删除图片吗')){//既删除数据又删除divvar pflag = this.parentNode;var url2 = "xxx?action=delete&from_ajax=1&pid=" + this.parentNode.id;var req = (window.XMLHttpRequest) ? new XMLHttpRequest() : (window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : false);if (!req) exit;var method = "GET";req.open(method,url2,true);req.onreadystatechange = function () {if (req.readyState == 4) {if(req.status == 200) {//既删除数据又删除div//alert(req.responseText);if (req.responseText){pflag.parentNode.removeChild(pflag);}else{alert("图片删除失败");}}else{alert("There was a problem with the request " + req.status);}}}req.send(url2);}}
//接入domdocument.getElementById(pid).appendChild(newspan);

  


范例2:

//创建TEXTAREA对象var newTextElement = document.createElement("textarea");newTextElement.name = pid+"[description]";newTextElement.rows = 5;newTextElement.cols = 20;document.getElementById(pid).appendChild(newTextElement);

  

范例3:

//创建input对象insertBefore实例var newElement = document.createElement("input");newElement.name = pid+"[title]";newElement.type= "text";newElement.size= 9;newElement.value= '标题';newElement.onclick = function() {if (this.value=='标题') {this.value='';}}    document.getElementById(pid).insertBefore(newElement, document.getElementById(pid).childNodes[0]);var newElementDiv = document.createElement("div");newElementDiv.className = 'search-con';var newDidElement = document.createElement("input");newDidElement.name =  pid+"_dids[]";newDidElement.className= "_dests";newDidElement.type= "text";newDidElement.size= 9;***newDidElement.setAttribute("rel",1); //如果直接赋值不能实现,使用setAttribute方法可以实现newElementDiv.appendChild(newDidElement);document.getElementById(pid).appendChild(newElementDiv);var newIdElement = document.createElement("input");newIdElement.type= "hidden";newIdElement.name =  pid+"[pid]";newIdElement.value = pid.substring(3);document.getElementById(pid).appendChild(newIdElement);}

  

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/544486.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

double.isnan_Java Double类isNaN()方法与示例

double.isnanSyntax: 句法&#xff1a; public boolean isNaN ();public static boolean isNaN(double value);双类isNaN()方法 (Double class isNaN() method) isNaN() method is available in java.lang package. isNaN()方法在java.lang包中可用。 isNaN() method is used …

MyBatis 中为什么不建议使用 where 1=1?

作者 | 王磊来源 | Java中文社群&#xff08;ID&#xff1a;javacn666&#xff09;转载请联系授权&#xff08;微信ID&#xff1a;GG_Stone&#xff09;最近接手了一个老项目&#xff0c;“愉悦的心情”自然无以言表&#xff0c;做开发的朋友都懂&#xff0c;这里就不多说了&am…

【openMV与机器视觉】四旋翼飞行控制背景下的PID控制与摄像头算法简介

文章目录声明1.四旋翼飞行控制简介2.飞行控制算法2.1.接收机PWM生成2.2.PID算法位置PID速度PID3.摄像头算法3.1.图像处理3.2.霍夫曼变换3.3.巡线算法3.3.寻找目标点降落算法声明 \qquad本文的算法在openMV IDE例程的基础上进行原创&#xff0c;在比赛结束后予以发表&#xff1b…

Java BigDecimal valueOf()方法与示例

BigDecimal类的valueOf()方法 (BigDecimal Class valueOf() method) Syntax: 句法&#xff1a; public static BigDecimal valueOf (double d);public static BigDecimal valueOf (long l);public static BigDecimal valueOf (long unsc_val , int sc_val);valueOf() method i…

关于liaoxuefeng的python3教程实战第四天

关于liaoxuefeng的python3教程实战第四天。地址&#xff1a;http://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/001432338991719a4c5c42ef08e4f44ad0f293ad728a27b000#0编写数据访问代码接下来&#xff0c;就可以真正开始编写代码操作对象了…

聊聊sql优化的15个小技巧

前言sql优化是一个大家都比较关注的热门话题&#xff0c;无论你在面试&#xff0c;还是工作中&#xff0c;都很有可能会遇到。如果某天你负责的某个线上接口&#xff0c;出现了性能问题&#xff0c;需要做优化。那么你首先想到的很有可能是优化sql语句&#xff0c;因为它的改造…

没有安装node对等点依赖_功能依赖项的对等 数据库管理系统

没有安装node对等点依赖Equivalence of Functional dependencies states that, if the relations of different Functional dependencies sets are given, then we have to find out whether one Functional dependency set is a subset of other given set or both the sets a…

【MATLAB】Parzen窗与K近邻算法原理与代码详解

文章目录1.非参数估计原理2.Parzen窗2.1.算法原理2.2.Matlab实现与参数探究3.K近邻3.1.算法原理3.2.Matlab实现与参数探究1.非参数估计原理 \qquad已知一个样本的概率分布时&#xff0c;我们只需要对概率分布中的参数进行估计即可得到该样本的概率密度函数。例如已知样本X服从正…

使用 Lambda 表达式实现超强的排序功能

我们在系统开发过程中&#xff0c;对数据排序是很常见的场景。一般来说&#xff0c;我们可以采用两种方式&#xff1a;借助存储系统&#xff08;SQL、NoSQL、NewSQL 都支持&#xff09;的排序功能&#xff0c;查询的结果即是排好序的结果查询结果为无序数据&#xff0c;在内存中…

【mongodb系统学习之四】查看mongodb进程

四、查看mongodb进程&#xff08;可以配合启动和关闭使用&#xff09;&#xff1a; 1&#xff09;、方法一&#xff1a;直接查看mongodb进程是否已经存在&#xff08;用上面的方式启动后&#xff0c;需要另开一个窗口操作&#xff09;&#xff1a;ps –ef|grep mongodb, 如图&a…

kotlin 编译时常量_Kotlin程序| 编译时常量示例

kotlin 编译时常量编译时常数 (Compile-time Constant) If the value of a read-only (immutable) property is known at the compile time. 如果在编译时已知只读(不可变)属性的值。 Mark it as a compile-time constant using the const modifier. 使用const修饰符将其标记为…

【Simulink】粒子群算法(PSO)整定PID参数(附代码和讲解)

目录0.背景1.粒子群算法1.1.算法简介1.2.算法步骤1.3.算法举例2.PID自整定2.1.基于M文件编写的PID参数自整定*2.2.复杂系统的PID自整定&#xff08;基于simulink仿真&#xff09;2.2.1.PSO优化PID的过程详解2.2.2.在PSO优化过程中修改参数价值权重阅读前必看&#xff1a;本代码…

Microsoft.AspNet.Identity 自定义使用现有的表—登录实现

Microsoft.AspNet.Identity是微软新引入的一种membership框架,也是微软Owin标准的一个实现。Microsoft.AspNet.Identity.EntityFramework则是Microsoft.AspNet.Identity的数据提供实现。但是在使用此框架的时候存在一些问题&#xff0c;如果是全新的项目还可以使用它默认提供的…

stl vector 函数_vector :: front()函数以及C ++ STL中的示例

stl vector 函数C vector :: front()函数 (C vector::front() function) vector::front() is a library function of "vector" header, it is used to access the first element from the vector, it returns a reference to the first element of the vector. vect…

SpringBoot 使用注解实现消息广播功能

背景在开发工作中&#xff0c;会遇到一种场景&#xff0c;做完某一件事情以后&#xff0c;需要广播一些消息或者通知&#xff0c;告诉其他的模块进行一些事件处理&#xff0c;一般来说&#xff0c;可以一个一个发送请求去通知&#xff0c;但是有一种更好的方式&#xff0c;那就…

【Matlab】模式识别——聚类算法集锦

文章目录0.聚类分析简介0.1.简单的聚类样本生成器1.静态聚类算法1.1.最近邻聚类算法1.1.1.算法原理1.1.2.参考代码1.1.3.参数选择及运行结果1.2.最大最小距离法1.2.1.算法原理1.2.2.参考代码1.2.3.参数选择及运行结果2.动态聚类算法2.1.C均值聚类算法2.1.1.算法原理2.1.2.参考代…

Ant 风格路径表达式

ANT通配符有三种&#xff1a; 通配符说明?匹配任何单字符*匹配0或者任意数量的字符**匹配0或者更多的目录例子&#xff1a; URL路径说明/app/*.x匹配(Matches)所有在app路径下的.x文件/app/p?ttern匹配(Matches) /app/pattern 和 /app/pXttern,但是不包括/app/pttern/**/exam…

java string查找_查找输出程序(Java String类)

java string查找Program 1 程序1 public class iHelp{public static void main (String[] args){System.out.println("Google".charAt(3));}}Output 输出量 gExplanation 说明 String.charAt() is a library function of String class, it returns character from…

【MATLAB】混合粒子群算法原理、代码及详解

目录1.算法1.1.原理1.2.性能比较1.3.步骤2.代码2.1.源码及注释2.2.执行与效果1.算法 1.1.原理 \qquad建议没接触过粒子群算法的朋友先看较为基础的全局粒子群算法原理及介绍&#xff0c;以下博文链接有详细的讲解、代码及其应用举例&#xff1a; 【Simulink】粒子群算法&#…

MVC HtmlHelper用法大全

HtmlHelper用来在视图中呈现 HTML 控件。 以下列表显示了当前可用的一些 HTML 帮助器。 本主题演示所列出的带有星号 (*) 的帮助器。 ActionLink - 链接到操作方法。 BeginForm * - 标记窗体的开头并链接到呈现该窗体的操作方法。 CheckBox * - 呈现复选框。 DropDownList *…