js AppendChild与insertBefore用法详细对比

 本篇文章主要是对js中AppendChild与insertBefore的用法进行了详细的对比。需要的朋友可以过来参考下,希望对大家有所帮助

我们知道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最后一个节点。(如要查看DOM,IE可以通过IE Developer Toolbar插件来查看,Firefox可以使用Firebug)
 
很明显,通过这个例子,可以知道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() 方法在节点的子节点列表任意位置插入新的节点。
 

时间: 2024-12-03 06:21:40

js AppendChild与insertBefore用法详细对比的相关文章

js AppendChild与insertBefore用法详细对比_javascript技巧

我们知道appendChild和insertBefore都有插入节点的功能.但在应用上,这两者之间还是有一些区别的. 比如我们要在下面这个div中插入一个子节点P时: <div id="test"><p id="x1">Node</p><p>Node</p></div> 我们可以这样写(测试某种情况时请将另外一种注释): 复制代码 代码如下: <script type="text

js中indexof的用法详细解析

 本篇文章主要是对js中indexof的用法进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助 String.IndexOf 方法 (Char, [startIndex], [count])   报告指定字符在此实例中的第一个匹配项的索引.搜索从指定字符位置开始,并检查指定数量的字符位置.   参数   value   要查找的 Unicode 字符. 对 value 的搜索区分大小写.   startIndex(Int32)   可选项,搜索起始位置.不设置则从0开始.   cou

js appendChild和insertBefore

1.appendchild和insertbefore是做对节点的方法来使用的,而insertafter只是自定义的一个函数 2.insertbefore相对于appendchild来说,比较灵活可以将新的节点插入到目标节点子节点数组中的任一位置. 3.使用appendchild和insertbefore来插入新的节点前提是,其兄弟节点必须有共同的父节点 appendchild定义 appendchild(newchild: node) : node appends a node to the c

js中eval函数用法详细

定义和用法 eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码. 语法 eval(string)参数 描述 string 必需.要计算的字符串,其中含有要计算的 JavaScript 表达式或要执行的语句. 返回值 通过计算 string 得到的值(如果有的话). 说明 该方法只接受原始字符串作为参数,如果 string 参数不是原始字符串,那么该方法将不作任何改变地返回.因此请不要为 eval() 函数传递 String 对象来作为参数. 如果试图覆盖 eval 属

js中indexof的用法详细解析_javascript技巧

String.IndexOf 方法 (Char, [startIndex], [count]) 报告指定字符在此实例中的第一个匹配项的索引.搜索从指定字符位置开始,并检查指定数量的字符位置. 参数 value 要查找的 Unicode 字符. 对 value 的搜索区分大小写. startIndex(Int32) 可选项,搜索起始位置.不设置则从0开始. count(Int32) 可选项,要检查的字符位置数. 返回值 如果找到该字符,则为 value 的索引位置:否则如果未找到,则为 -1. I

js中AppendChild与insertBefore的用法详细解析

 这篇文章主要是对js中AppendChild与insertBefore的用法进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 appendChild定义 appendChild(newChild: Node) : Node Appends a node to the childNodes array for the node. Supported: IE 5.0+, Mozilla 1.0+, Netscape 6.0+, Safari 1.0+, Opera 7.0+ 添加

js中AppendChild与insertBefore的用法详细解析_javascript技巧

appendChild定义appendChild(newChild: Node) : NodeAppends a node to the childNodes array for the node.Supported: IE 5.0+, Mozilla 1.0+, Netscape 6.0+, Safari 1.0+, Opera 7.0+添加一个节点到指定的节点的子节点数组中,读起来好象有点拗口,简单地说就是将元素添加到指定的节点中 appendChild用法target.appendChil

js在指定位置增加节点函数insertBefore()用法实例

 这篇文章主要介绍了js在指定位置增加节点函数insertBefore()用法,实例分析了insertBefore()函数追加结点的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了js在指定位置增加节点函数insertBefore()用法.分享给大家供大家参考.具体分析如下: 函数原型如下: insertBefore(参数1,参数2):在指定位置添加节点 具体代码如下: 代码如下: <html> <head> <script type="te

js在指定位置增加节点函数insertBefore()用法实例_javascript技巧

本文实例讲述了js在指定位置增加节点函数insertBefore()用法.分享给大家供大家参考.具体分析如下: 函数原型如下: insertBefore(参数1,参数2):在指定位置添加节点 具体代码如下: 复制代码 代码如下: <html> <head> <script type="text/javascript"> function t(){  var nodeli = document.createElement('li');//创建一个li节