Node 對象提供了一些用于向 HTML 頁面插入節點的方法，通過這些方法我們可以實現向 HTML 頁面新增元素，或者移動 HTML 頁面中的元素。 ## appendChild() 方法 Node 對象提供的 appendChild() 方法可以向指定節點的子節點列表的最后添加一個新的子節點。其語法結構如下: ```javascript var child = node.appendChild(child); ``` 在上述語法結構中，appendChild() 方法的參數 child 表示添加的新的子節點，同時該子節點也是 appendChild() 方法的返回值。 我們可以通過如下代碼示例，學習 appendChild() 方法的使用: ```javascript var parent = document.getElementById('parent'); var button = document.createElement('button'); button.setAttribute('class','button'); var text = document.createTextNode('A New Button'); button.appendChild(text); // 將新節點添加到父節點中 parent.appendChild(button); ``` 在上述代碼示例中，我們創建了一個新的 `<button>` 元素，并且將這個 `<button>` 元素添加到指定節點的子節點列表的最后面。 > **值得注意的是:** 如果我們是將 HTML 頁面中原有的節點插入到指定節點的子節點列表的最后面，那這個被插入的節點會先從原有的位置移除，再插入到指定的位置。 如下代碼示例，就是將 HTML 頁面原有的節點插入到指定位置: ```javascript var parent = document.getElementById('parent'); var button = document.getElementById('btn'); // 將新節點添加到父節點中 parent.appendChild(button); ``` > **值得注意的是:** appendChild() 方法只能允許在同一個 HTML 頁面中實現插入節點的功能，而不能實現跨 HTML 頁面的插入節點的功能。 ## insertBefore() 方法 Node 對象除了提供了 appendChild() 方法可以實現插入節點之外，還提供了 insertBefore() 方法同樣可以實現插入節點的功能。其語法結構如下: ```javascript var insertedElement = parentElement.insertBefore(newElement, referenceElement); ``` 由于 insertBefore() 方法實現的是將一個節點插入到指定節點的某個子節點的前面。所以，在上述語法結構中: - 參數 referenceElement 表示指定節點的某個子節點 - 參數 newElement 表示插入的節點 - 調用 insertBefore() 方法的 parentElement 表示指定的節點 - 作為返回值的 insertedElement 表示被插入的節點，即 newElement 我們可以通過如下代碼示例，學習 insertBefore() 方法的使用: ```javascript // 獲取目標父節點 var parentElement = document.getElementById('parent'); // 創建新節點 var newElement = document.createElement('button'); newElement.setAttribute('class','button'); var text = document.createTextNode('A New Button'); newElement.appendChild(text); // 獲取目標節點 var referenceElement = document.getElementById('btn'); // 將新節點添加到父節點中 parentElement.insertBefore(newElement, referenceElement); ``` > **值得注意的是:** 如果我們是將 HTML 頁面中原有的節點插入到指定節點的某個子節點的前面，那這個被插入的節點會先從原有的位置移除，再插入到指定的位置。 如下代碼示例，就是將 HTML 頁面原有的節點插入到指定位置: ```javascript // 獲取目標父節點 var parentElement = document.getElementById('parent'); // 獲取被插入的節點 var newElement = document.getElementById('button'); // 獲取目標節點 var referenceElement = document.getElementById('btn'); // 將新節點添加到父節點中 parentElement.insertBefore(newElement, referenceElement); ``` > **值得注意的是:** 如果 referenceElement 為 null 則 newElement 將被插入到子節點的末尾。 ## 關于 insertAfter() 方法 我們需要注意的是，Node 對象中并沒有提供 insertAfter() 方法。所以，我們并不能像使用 jQuery 中的 insertAfter() 方法一樣使用。 但是，如果我們在開發中需要 insertAfter() 方法的話，是可以利用 insertBefore() 方法來實現的。 實現思路其實就是利用 insertBefore() 方法將被插入的節點插入到指定節點的下一個相鄰兄弟的前面，最終實現插入到指定節點的后面的效果。 ```javascript parentElement.insertBefore(newElement, referenceElement.nextSibling); ``` 但由于主流瀏覽器存在空白節點的問題，所以，在真正實現時不能簡單地直接通過 nextSibling 屬性來解決的。 最后，真正可以實現 insertAfter() 方法的主要邏輯如下: ```javascript var nextElement = referenceElement.nextSibling; if(nextElement.nodeType === 3){ nextElement = nextElement.nextSibling; } parentElement.insertBefore(newElement, nextElement); ``` 如果 referenceElement 沒有下一個相鄰的兄弟節點的話，那 referenceElement 一定是該子節點列表的最后一個子節點。這樣 referenceElement.nextSibling 返回的值為 ull，newElement 就會被插入到子節點列表的最后面。 > **值得注意的是:** 關于 insertAfter() 方法，我們這里只是提供了一個解決的思路。在具體使用時，可能封裝的具體用法也會不同。