資訊專欄INFORMATION COLUMN
摘要：值得注意的是如果我們是將頁面中原有的節點插入到指定節點的子節點列表的最后面，那這個被插入的節點會先從原有的位置移除，再插入到指定的位置。
Node 對象提供了一些用于向 HTML 頁面插入節點的方法，通過這些方法我們可以實現向 HTML 頁面新增元素，或者移動 HTML 頁面中的元素。
appendChild() 方法Node 對象提供的 appendChild() 方法可以向指定節點的子節點列表的最后添加一個新的子節點。其語法結構如下:
var child = node.appendChild(child);
在上述語法結構中，appendChild() 方法的參數 child 表示添加的新的子節點，同時該子節點也是 appendChild() 方法的返回值。
我們可以通過如下代碼示例，學習 appendChild() 方法的使用:
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);
在上述代碼示例中，我們創建了一個新的 元素，并且將這個 元素添加到指定節點的子節點列表的最后面。
值得注意的是: 如果我們是將 HTML 頁面中原有的節點插入到指定節點的子節點列表的最后面，那這個被插入的節點會先從原有的位置移除，再插入到指定的位置。
如下代碼示例，就是將 HTML 頁面原有的節點插入到指定位置:
var parent = document.getElementById("parent");
var button = document.getElementById("btn");
// 將新節點添加到父節點中
parent.appendChild(button);
insertBefore() 方法值得注意的是: appendChild() 方法只能允許在同一個 HTML 頁面中實現插入節點的功能，而不能實現跨 HTML 頁面的插入節點的功能。
Node 對象除了提供了 appendChild() 方法可以實現插入節點之外，還提供了 insertBefore() 方法同樣可以實現插入節點的功能。其語法結構如下:
var insertedElement = parentElement.insertBefore(newElement, referenceElement);
由于 insertBefore() 方法實現的是將一個節點插入到指定節點的某個子節點的前面。所以，在上述語法結構中:
參數 referenceElement 表示指定節點的某個子節點
參數 newElement 表示插入的節點
調用 insertBefore() 方法的 parentElement 表示指定的節點
作為返回值的 insertedElement 表示被插入的節點，即 newElement
我們可以通過如下代碼示例，學習 insertBefore() 方法的使用:
// 獲取目標父節點
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 頁面原有的節點插入到指定位置:
// 獲取目標父節點
var parentElement = document.getElementById("parent");
// 獲取被插入的節點
var newElement = document.getElementById("button");
// 獲取目標節點
var referenceElement = document.getElementById("btn");
// 將新節點添加到父節點中
parentElement.insertBefore(newElement, referenceElement);
關于 insertAfter() 方法值得注意的是: 如果 referenceElement 為 null 則 newElement 將被插入到子節點的末尾。
我們需要注意的是，Node 對象中并沒有提供 insertAfter() 方法。所以，我們并不能像使用 jQuery 中的 insertAfter() 方法一樣使用。
但是，如果我們在開發中需要 insertAfter() 方法的話，是可以利用 insertBefore() 方法來實現的。
實現思路其實就是利用 insertBefore() 方法將被插入的節點插入到指定節點的下一個相鄰兄弟的前面，最終實現插入到指定節點的后面的效果。
parentElement.insertBefore(newElement, referenceElement.nextSibling);
但由于主流瀏覽器存在空白節點的問題，所以，在真正實現時不能簡單地直接通過 nextSibling 屬性來解決的。
最后，真正可以實現 insertAfter() 方法的主要邏輯如下:
var nextElement = referenceElement.nextSibling;
if(nextElement.nodeType === 3){
nextElement = nextElement.nextSibling;
}
parentElement.insertBefore(newElement, nextElement);
如果 referenceElement 沒有下一個相鄰的兄弟節點的話，那 referenceElement 一定是該子節點列表的最后一個子節點。這樣 referenceElement.nextSibling 返回的值為 ull，newElement 就會被插入到子節點列表的最后面。
值得注意的是: 關于 insertAfter() 方法，我們這里只是提供了一個解決的思路。在具體使用時，可能封裝的具體用法也會不同。
本教程免費開源，任何人都可以免費學習、分享，甚至可以進行修改。但需要注明作者及來源，并且不能用于商業。
本教程采用知識共享署名-非商業性使用-禁止演繹 4.0 國際許可協議進行許可。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84448.html
摘要：對象的作用樹結構主要是依靠節點進行解析，稱為節點樹結構。對象的繼承鏈關系對象是繼承于對象的，是一個用于接收事件的對象。但需要注明作者及來源，并且不能用于商業。本教程采用知識共享署名非商業性使用禁止演繹國際許可協議進行許可。 DOM 的標準規范中提供了 Node 對象，該對象主要提供了用于解析 DOM 節點樹結構的屬性和方法。 Node 對象的作用 DOM 樹結構主要是依靠節點進行解析，...
摘要：系列教程是一套免費開源，任何人都可以免費學習分享，甚至可以進行修改。本文是這套系列教程的索引也就是目錄第一回介紹在最開始，我們先來了解是什么的作用，以及瀏覽器的支持是怎么樣的。 《EASYDOM》系列教程是一套免費、開源，任何人都可以免費學習、分享，甚至可以進行修改。但需要注明作者及來源，并且不能用于商業。 本文是這套系列教程的索引（也就是目錄）: 第一回 DOM 介紹 在最開始，我...
摘要：對象提供了方法實現從頁面中刪除指定節點。其語法結構如下在上述語法結構中，調用方法的表示參數的父節點，而參數則表示要刪除的那個節點。則用于存儲要刪除的節點的引用，即。 Node 對象提供了 removeChild() 方法實現從 HTML 頁面中刪除指定節點。其語法結構如下: var oldChild = node.removeChild(child); OR element.remov...
摘要：也就是說，它沒有父節點。如果參數設為，則不克隆它的任何子節點。為了防止一個文檔中出現兩個重復的元素使用方法克隆的節點在需要時應該指定另外一個與原值不同的。 Node 對象提供了 cloneNode() 方法實現 HTML 頁面中節點的復制功能。其語法結構如下: var dupNode = node.cloneNode(deep); 在上述語法結構中，調用 cloneNode() 方法的...
摘要：參數則表示頁面中被替換的節點。方法的返回值也是被替換的節點，即。如果該節點已經存在于節點樹結構中的話，則它會被從原始位置刪除。但需要注明作者及來源，并且不能用于商業。本教程采用知識共享署名非商業性使用禁止演繹國際許可協議進行許可。 Node 對象提供了 replaceChild() 方法實現 HTML 頁面中節點的替換功能。其語法結構如下: replacedNode = parentN...
閱讀 1904·2021-11-09 09:46
閱讀 2486·2019-08-30 15:52
閱讀 2445·2019-08-30 15:47
閱讀 1320·2019-08-29 17:11
閱讀 1746·2019-08-29 15:24
閱讀 3501·2019-08-29 14:02
閱讀 2442·2019-08-29 13:27
閱讀 1199·2019-08-29 12:32
