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