js AppendChild與insertBefore用法詳細(xì)對(duì)比

更新時(shí)間：2013年12月16日 09:41:25 作者：

本篇文章主要是對(duì)js中AppendChild與insertBefore的用法進(jìn)行了詳細(xì)的對(duì)比。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助

我們知道appendChild和insertBefore都有插入節(jié)點(diǎn)的功能。但在應(yīng)用上，這兩者之間還是有一些區(qū)別的。

比如我們要在下面這個(gè)div中插入一個(gè)子節(jié)點(diǎn)P時(shí)：

我們可以這樣寫(xiě)(測(cè)試某種情況時(shí)請(qǐng)將另外一種注釋)：

復(fù)制代碼代碼如下:

<script type="text/javascript"> 
var oTest = document.getElementById("test"); 
var newNode = document.createElement("p"); 
newNode.innerHTML = "This is a test"; 
//測(cè)試從這里開(kāi)始 
//appendChild方法： 
oTest.appendChild(newNode); 
//insertBefore方法： 
oTest.insertBefore(newNode,null); 
</script>

通過(guò)以上的代碼，可以測(cè)試到一個(gè)新的節(jié)點(diǎn)被創(chuàng)建到了節(jié)點(diǎn)div下，且該節(jié)點(diǎn)是div最后一個(gè)節(jié)點(diǎn)。(如要查看DOM，IE可以通過(guò)IE Developer Toolbar插件來(lái)查看，F(xiàn)irefox可以使用Firebug)

很明顯，通過(guò)這個(gè)例子，可以知道appendChildhild和insertBefore都可以進(jìn)行插入節(jié)點(diǎn)的操作。

在上面的例子中有這樣一句代碼：oTest.insertBefore(newNode,null) ，這里insertBefore有2個(gè)參數(shù)可以設(shè)置，第一個(gè)是和appendChild相同的，第二卻是它特有的。它不僅可以為null，還可以為：

復(fù)制代碼代碼如下:

<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>

這個(gè)例子將在x1節(jié)點(diǎn)前面插入一個(gè)新的節(jié)點(diǎn)

又或：

復(fù)制代碼代碼如下:

<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>

這個(gè)例子將在x1節(jié)點(diǎn)的下一個(gè)節(jié)點(diǎn)前面插入一個(gè)新的節(jié)點(diǎn)

還可為：

復(fù)制代碼代碼如下:

<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>

這個(gè)例子將在第一子節(jié)點(diǎn)前面插入一個(gè)新的節(jié)點(diǎn)，也可以通過(guò)改變childNodes[0,1,...]來(lái)在其它位置插入新的節(jié)點(diǎn)

由于可見(jiàn)insertBefore()方法的特性是在已有的子節(jié)點(diǎn)前面插入新的節(jié)點(diǎn)，但例一中使用insertBefore()方法也可以在子節(jié)點(diǎn)列表末插入新節(jié)點(diǎn)的。兩種情況結(jié)合起來(lái)，發(fā)現(xiàn)insertBefore()方法插入節(jié)點(diǎn)，是可以在子節(jié)點(diǎn)列表的任意位置。

從這幾個(gè)例子中得出：
appendChild() 方法在節(jié)點(diǎn)的子節(jié)點(diǎn)列表末添加新的子節(jié)點(diǎn)。
insertBefore() 方法在節(jié)點(diǎn)的子節(jié)點(diǎn)列表任意位置插入新的節(jié)點(diǎn)。

您可能感興趣的文章: