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

?

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

1 <div class="btns">
　　<input type="button" value="插入元素" id="creatbtn"/>
</div> 2 <div id="box-one"> 3 　　<p class="con2" id="p1">1</p> 4 　　<p class="con2" >2</p> 5 　　<p class="con2" >3</p> 6 </div> 1 window.onload = function () { 2 　　var btn = document.getElementById("creatbtn"); 3 　　btn.onclick = function() { 4 　　　　insertEle(); 5　　 } 6 } 7 function insertEle() { 8 　　var oTest = document.getElementById("box-one"); 9 　　var newNode = document.createElement("div"); // createElement 是在對象中創建一個對象 10 　　newNode.innerHTML = " This is a newcon "; 11 　　//oTest.appendChild(newNode); 12 　　oTeset.insertBefore(newNode,null); // 這兩種方法均可實現 或者oTeset.insertBefore(newNode,oTeset.childNodes[0])
　　　　 13 }

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

1 function insertEle() { 2 　　var oTest = document.getElementById("box-one"); 3 　　var newNode = document.createElement("div"); 4 　　var reforeNode = document.getElementById("p1"); 5 　　newNode.innerHTML = " This is a newcon "; 6 　　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定義?

1 function insertAfter(newEl, targetEl) { 2 var parentEl = targetEl.parentNode; 3 if(parentEl.lastChild == targetEl) { 4 parentEl.appendChild(newEl); 5 }else { 6 parentEl.insertBefore(newEl,targetEl.nextSibling); 7 } 8 }

?

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

?

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

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

轉載于:https://www.cnblogs.com/zhangym118/p/5872299.html

總結

以上是生活随笔為你收集整理的js：插入节点appendChild insertBefore使用方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。