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

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

JavaScriptappendChild() 方法可向當前節點的子節點列表的末尾新增新的子節點。用法如下：

1 appendChild(newchild)

引數 newchild 表示新新增的節點物件，並返回新增的節點。

示例1

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

1 <div id="box"></div>
2 <script>
3     var p = document.createElement("p");  //
 
建立段落節點
4     var txt = document.createTextNode("盒模型");  //建立文字節點，文字內容為“盒模型”
5     p.appendChild(txt);  //把文字節點增加到段落節點中
6     document.getElementById("box").appendChild(p);  //獲取box元素，把段落節點增加儘量
7 </script>

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

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

示例2

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

 1 <div id="red">
 2     <h1>紅盒子</h1>
 3 </div>
 4 <div id="blue">藍盒子</div>
 5 <button id="ok">移動</button>
 6 <script>
 7     var ok = document.getElementById("ok");  //獲取按鈕元素的引用
 

 8     ok.onclick = function () {  //為按鈕註冊一個滑鼠單擊事件的處理函式
 9         var red = document.getElementById("red");  //獲取紅色盒子的引用
10         var blue= document.getElementById("blue");  //獲取藍色盒子的引用
11         blue.appendChild(red);  //最後移動紅色盒子到藍色盒子中
12     }
13 </script>

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

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

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

1 insertBefore(newchild, refchild)

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

示例3

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

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

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

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

本文來自學習小花，作者：aixuexi666888，轉載請註明原文連結：https://www.cnblogs.com/aixuexi666888/p/15542146.html