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

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

很明顯，通過這個例子，可以知道appendChildhild和insertBefore都可以進行插入節(jié)點的操作。

在上面的例子中有這樣一句代碼：oTest.insertBefore(newNode,null) ，這里insertBefore有2個參數(shù)可以設(shè)置，第一個是和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>

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

又或：

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

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

還可為：

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

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

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

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

您可能感興趣的文章: