JS appendChild()和insertBefore()方法：插入新節點

在文檔中有兩種辦法插入新節點，一種是在開頭插入，一種是在末尾插入。

appendChild()方法：在開頭插入新節點

JavaScript appendChild() 方法可向當前節點的子節點列表的末尾添加新的子節點。用法如下：

appendChild(newchild)

參數 newchild 表示新添加的節點對象，並返回新增的節點。

示例1

下面示例展示了如何把段落文本增加到文檔中的指定的 div 元素中，使它成為當前節點的最后一個子節點。

<div id="box"></div>
<script>
    var p = document.createElement("p");  //創建段落節點
    var txt = document.createTextNode("盒模型");  //創建文本節點，文本內容為“盒模型”
    p.appendChild(txt);  //把文本節點增加到段落節點中
    document.getElementById("box").appendChild(p);  //獲取box元素，把段落節點增加盡量
</script>

如果文檔樹中已經存在參數節點，則將從文檔樹中刪除，然后重新插入新的位置。如果添加的節點是 DocumentFragment 節點，則不會直接插入，而是把它的子節點插入當前節點的末尾。

將元素添加到文檔樹中，瀏覽器會立即呈現該元素。此后，對這個元素所作的任何修改都會實時反映在瀏覽器中。

示例2

在下面示例中，新建兩個盒子和一個按鈕，使用 CSS 設計兩個盒子顯示為不同的效果；然后為按鈕綁定事件處理程序，設計當點擊按鈕時執行插入操作。

<div id="red">
    <h1>紅盒子</h1>
</div>
<div id="blue">藍盒子</div>
<button id="ok">移動</button>
<script>
    var ok = document.getElementById("ok");  //獲取按鈕元素的引用
    ok.onclick = function () {  //為按鈕注冊一個鼠標單擊事件的處理函數
        var red = document.getElementById("red");  //獲取紅色盒子的引用
        var blue= document.getElementById("blue");  //獲取藍色盒子的引用
        blue.appendChild(red);  //最后移動紅色盒子到藍色盒子中
    }
</script>

上面代碼使用 appendChild() 方法把紅盒子移動到藍色盒子中間。在移動指定節點時，會同時移動指定節點包含的所有子節點，演示效果如圖所示。

 

insertBefore()方法：在末尾插入新節點

JavaScript insertBefore() 方法可向當前節點的子節點列表的開頭添加新的子節點。用法如下：

 

insertBefore(newchild, refchild)

其中參數 newchild 表示新插入的節點，refchild 表示插入新節點的節點，用於指定插入節點的后面相鄰位置。插入成功后，該方法將返回新插入的子節點。

示例3

針對示例 2 ，如果把藍盒子移動到紅盒子所包含的標題元素的前面，使用 appendChild() 方法是無法實現的，此時可以使用 insertBefore() 方法來實現。

var ok = documeng.getElementById("ok");  //獲取按鈕元素的引用
ok.onclick = function () {  //為按鈕注冊一個鼠標單擊事件處理函數
var red = document.getElementById("red");  //獲取紅色盒子的引用
var blue = document.getElementById("blue");  //獲取藍色盒子的引用
var h1 = document.getElementsByTagName("h1")[0];  //獲取標題元素的引用
red.insertBefore(blue, h1);  //把藍色盒子移動到紅色盒子內，且位於標題前面
}

當單擊“移動”按鈕之后，藍色盒子被移動到紅色盒子內部，且位於標題元素前面。演示效果如下：

 

 

insertBefore() 方法與 appendChild() 方法一樣，可以把指定元素及其所包含的所有子節點都一起插入到指定位置中。同時會先刪除移動的元素，再重新插入到新的位置。