首先 從定義來理解 這兩個方法：

appendChild() 方法：可向節點的子節點列表的末尾添加新的子節點。語法：appendChild(newchild)

insertBefore() 方法：可在已有的子節點前插入一個新的子節點。語法 ：insertBefore(newchild,refchild)

相同之處：插入子節點

不同之處：實現原理方法不同。

　　　　　appendChild方法是在父級節點中的子節點的末尾添加新的節點（相對于父級節點 來說）。

　　　　 ? insertBefore 方法 是在已有的節點前添加新的節點（相對于子節點來說的）。

來看個這個簡單的實例：在id為box-con 的末尾添加一個子節點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();
}
}
function insertEle() {
var oTest = document.getElementById("box-one");
var newNode = document.createElement("div");

newNode.innerHTML =" This is a newcon ";
//oTest.appendChild(newNode);
oTeset.insertBefore(newNode,null); // 這兩種方法均可實現

}

這個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的元素前面

}

?

或者

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.nextSibling);//新建的元素節點插入到 id為p1后面節點元素的 前面，
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　也就是說 插入id為P1節點元素的后面。

}

這里想說的是 nextSibling :某個元素之后緊跟的元素（處于同一樹層級中）。

reforeNode.nextSibling ：取得的是reforeNode對象的緊跟著的下一個節點。

previousSibling - 取得某節點的上一個同級節點

由于可見insertBefore()方法的特性是在已有的子節點前面插入新的節點但是兩種情況結合起來發現insertBefore()方法插入節點，是可以在子節點列表的任意位置。

//DOM沒有提供insertAfter()方法 function insertAfter(newElement, targetElement){var parent = targetElement.parentNode;if (parent.lastChild == targetElement) {// 如果最后的節點是目標元素，則直接添加。因為默認是最后parent.appendChild(newElement);}else {parent.insertBefore(newElement, targetElement.nextSibling);//如果不是，則插入在目標元素的下一個兄弟節點 的前面。也就是目標元素的后面}}

總結

以上是生活随笔為你收集整理的js insertBefore insertAfter appendChild的全部內容，希望文章能夠幫你解決所遇到的問題。

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