js：插入節點appendChild insertBefore使用方法

首先 從定義來理解 這兩個方法： 
appendChild() 方法：可向節點的子節點列表的末尾添加新的子節點。語法：appendChild(newchild) 
insertBefore() 方法：可在已有的子節點前插入一個新的子節點。語法 ：insertBefore(newchild,refchild) 
相同之處：插入子節點 
不同之處：實現原理方法不同。 
　　　　 appendChild 方法是在父級節點中的子節點的末尾添加新的節點（相對於父級節點來說）。 
　　　　 insertBefore  方法是在已有的節點前添加新的節點（相對於子節點來說的）。 

 

來看個這個簡單的實例：在id為box-one 的末尾添加一個子節點div 

<div class="btns">
　　<input type="button" value="插入元素" id="creatbtn"/>
</div> 
<div id="box-one"> 
　　<p class="con2" id="p1">1</p> 
　　<p class="con2" >2</p> 
　　<p class="con2" >3</p> 
</div> 

window.onload = function () { 
　　var btn = document.getElementById("creatbtn"); 
　　btn.onclick = function() { 
　　　　insertEle(); 
 5　　 } 
} 
function insertEle() { 
　　var oTest = document.getElementById("box-one"); 
　　var newNode = document.createElement("div"); // createElement 是在對象中創建一個對象
　　newNode.innerHTML = " This is a newcon "; 
　　//oTest.appendChild(newNode); 
　　oTeset.insertBefore(newNode,null); // 這兩種方法均可實現 或者oTeset.insertBefore(newNode,oTeset.childNodes[0])
　　　　
} 

這個insertBefore 的第一個參數 和appendChild的一樣，都是那個新的節點變量，而insert第二個參數不僅可以為null 。也可以這樣寫：

function insertEle() { 
　　var oTest = document.getElementById("box-one"); 
　　var newNode = document.createElement("div"); 
　　var reforeNode = document.getElementById("p1"); 
　　newNode.innerHTML = " This is a newcon "; 
　　oTest.insertBefore(newNode,reforeNode); // 新建的元素節點插入到 id為p1的元素前面 
//或者oTest.insertBefore(newNode,reforeNode.nextSibling);//新建的元素節點插入到 id為p1后面節點元素的前面，也就是說 插入id為P1節點元素的后面。 
7} 

nextSibling :某個元素之后緊跟的元素（處於同一樹層級中）。 

reforeNode.nextSibling ：取得的是reforeNode對象的緊跟着的下一個節點。 
previousSibling - 取得某節點的上一個同級節點。

//appendChild無法設置想要插入的明確位置
//oTest.appendChild(oP2);
 
//insertBefore則可以設置
//oTest.insertBefore(oP2,null);
//oTest.insertBefore(oP2,oP1);
//oTest.insertBefore(oP2,oP1.nextSibling);
//oTest.insertBefore(oP2,oP3.previousSibling);
//oTest.insertBefore(oP2,oTest.childNodes[0]);

 

好了那么有insertBefore的應該也有insertAfter吧？ 
好那我們來用Aptana編寫一個例子吧，但Aptana的智能提示告訴我其實沒有insertAfter這個方法 
那么就自己定義一個羅
insertAfter定義 

function insertAfter(newEl, targetEl) { 
    var parentEl = targetEl.parentNode; 
    if(parentEl.lastChild == targetEl) { 
        parentEl.appendChild(newEl); 
    }else { 
        parentEl.insertBefore(newEl,targetEl.nextSibling); 
    } 
}     

 

總結： 
1、appendChild和insertBefore是做對節點的方法來使用的，而insertAfter只是自定義的一個函數 
2、insertBefore相對於appendChild來說，比較靈活可以將新的節點插入到目標節點子節點數組中的任一位置。 
3、使用appendChild和insertBefore來插入新的節點前提是，其兄弟節點必須有共同的父節點

 

如果只從DOM操作的性能上分析，appendChild和insertBefore這兩個方法本身是沒有太大差異的。但是insertBefore本身具有appendChild無法比擬的功能，它對插入元素的位置是可以選擇的。因此它對頁面可能造成的影響也更大，渲染的開銷也可能更大。

最后順便說一下，在IE6上，文檔加載完畢之前使用appendChild會出錯，而使用insertBefore就不會出錯。