首先 從定義來(lái)理解 這兩個(gè)方法：?
appendChild() 方法：可向節(jié)點(diǎn)的子節(jié)點(diǎn)列表的末尾添加新的子節(jié)點(diǎn)。語(yǔ)法：appendChild(newchild)?
insertBefore() 方法：可在已有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)。語(yǔ)法 ：insertBefore(newchild,refchild)?
相同之處：插入子節(jié)點(diǎn)?
不同之處：實(shí)現(xiàn)原理方法不同。?
　　　　 appendChild 方法是在父級(jí)節(jié)點(diǎn)中的子節(jié)點(diǎn)的末尾添加新的節(jié)點(diǎn)（相對(duì)于父級(jí)節(jié)點(diǎn)來(lái)說(shuō)）。?
　　　　 insertBefore ?方法是在已有的節(jié)點(diǎn)前添加新的節(jié)點(diǎn)（相對(duì)于子節(jié)點(diǎn)來(lái)說(shuō)的）。?

?

來(lái)看個(gè)這個(gè)簡(jiǎn)單的實(shí)例：在id為box-one 的末尾添加一個(gè)子節(jié)點(diǎn)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 是在對(duì)象中創(chuàng)建一個(gè)對(duì)象 10 　　newNode.innerHTML = " This is a newcon "; 11 　　//oTest.appendChild(newNode); 12 　　oTeset.insertBefore(newNode,null); // 這兩種方法均可實(shí)現(xiàn) 或者oTeset.insertBefore(newNode,oTeset.childNodes[0])
　　　　 13 }

這個(gè)insertBefore 的第一個(gè)參數(shù) 和appendChild的一樣，都是那個(gè)新的節(jié)點(diǎn)變量，而insert第二個(gè)參數(shù)不僅可以為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); // 新建的元素節(jié)點(diǎn)插入到 id為p1的元素前面
//或者oTest.insertBefore(newNode,reforeNode.nextSibling);//新建的元素節(jié)點(diǎn)插入到 id為p1后面節(jié)點(diǎn)元素的前面，也就是說(shuō) 插入id為P1節(jié)點(diǎn)元素的后面。?
7}

nextSibling :某個(gè)元素之后緊跟的元素（處于同一樹(shù)層級(jí)中）。?

reforeNode.nextSibling ：取得的是reforeNode對(duì)象的緊跟著的下一個(gè)節(jié)點(diǎn)。?
previousSibling - 取得某節(jié)點(diǎn)的上一個(gè)同級(jí)節(jié)點(diǎn)。

//appendChild無(wú)法設(shè)置想要插入的明確位置 //oTest.appendChild(oP2);//insertBefore則可以設(shè)置 //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的應(yīng)該也有insertAfter吧？?
好那我們來(lái)用Aptana編寫一個(gè)例子吧，但Aptana的智能提示告訴我其實(shí)沒(méi)有insertAfter這個(gè)方法?
那么就自己定義一個(gè)羅
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 }

?

總結(jié)：?
1、appendChild和insertBefore是做對(duì)節(jié)點(diǎn)的方法來(lái)使用的，而insertAfter只是自定義的一個(gè)函數(shù)?
2、insertBefore相對(duì)于appendChild來(lái)說(shuō)，比較靈活可以將新的節(jié)點(diǎn)插入到目標(biāo)節(jié)點(diǎn)子節(jié)點(diǎn)數(shù)組中的任一位置。?
3、使用appendChild和insertBefore來(lái)插入新的節(jié)點(diǎn)前提是，其兄弟節(jié)點(diǎn)必須有共同的父節(jié)點(diǎn)

?

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

最后順便說(shuō)一下，在IE6上，文檔加載完畢之前使用appendChild會(huì)出錯(cuò)，而使用insertBefore就不會(huì)出錯(cuò)。

轉(zhuǎn)載于:https://www.cnblogs.com/zhangym118/p/5872299.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。