在交互網頁中,我們需要動態地添加一些對象,例如:如用戶鼠標移到某處,出現相應提示或對話,類似于這樣的功能,網站開發人員肯定需要添加元素,我們常用的是appendChild(),接下來南昌網站設計公司技術人員對大家詳細介紹.

DOM提供了一些操作節點的方法。其中，最常用的方法是appendChild()，用于向childNodes列表的末尾添加一個節點。添加節點后，childNodes的新增節點、父節點及以前的最后一個子節點的關系指針都會相應地得到更新。更新完成后，appendChild()返回新增的節點。來看下面的例子：

var returnedNode=someNode.appendChild (newNode);

alert (returnedNode==newNode); //true

alert( someNode.las tChild==newNode); //true

如果傳人到appendChild()中的節點已經是文檔的一部分了，那結果就是將該節點從原來的位置轉移到新位置。即使可以將DOM樹看成是由一系列指針連接起來的，但任何DOM節點也不能同時出現在文檔中的多個位置上。因此，如果在調用appendChild()時傳人了父節點的第一個子節點，那么該節點就會成為父節點的最后一個子節點，如下面的例子所示：

var returnedNode=someNode.appendChild(someNode.firstChild);

alert( returnedNode==someNode.firs tChild); //false

alert(returnedNode==someNodelastChild); //true

如果需要把節點放在childNodes列表中某個特定的位置上，而不是放在末尾，那么可以使用insertBefore()方法。這個方法接受兩個參數：要插入的節點和作為參照的節點。插入節點后，被插入的節點會變成參照節點的前一個同胞節點(previousSibling)，同時被方法返回。如果參照節點是null，則insertBefore()與appendChild()執行相同的操作，如下面的例子所示：

//插入后成為最后一個子節點

returnedNode=someNode.insertBefore (newNode, null);

alert(newNode==someNode.lastChild); //true

//插入后成為第一個了節點

var returnedNode=someNode.insertBefore (newNode, someNode.firstChild);

alert(re七urnedNode==newNode); //true

alert(newNode==someNode.firstChild); //true

//插入到最后一個子節點前面

returnedNode:someNode.insertBefore(newNode, someNode.lastChild);

alert(newNode==someNode.childNodes(someNode.childNodes.length-2]);//true

前面介紹的appendChild()和insertBefore()方法都只插入節點，不會移除節點。而下面要介紹的replaceChild()方法接受的兩個參數是：要插入的節點和要替換的節點。要替換的節點將由這.

方法返回并從文檔樹中被移除，同時由要插入的節點占據其位置。來看下面的例子：

//替換第一個子節點

var returnedNode=someNode.replaceChild(newNode, someNode.firstChild);

//替換最后一個子節點

returnedNode=someNode.replaceChild (newNode, someNode.lastChild);

在使用replaceChild()插入一個節點時，該節點的所有關系指針都會從被它替換的節點復制過盡管從技術上講，被替換的節點仍然還在文檔中，但它在文檔中已經沒有了自己的位置。

如果只想移除而非替換節點，可以使用removeChild()方法。這個方法接受一個參數，即要移除節點。被移除的節點將成為方法的返回值，如下面的例子所示：

//移除第一個子節點

var formerFirstChild=someNode.removeChild( someNode.firstChild);

//移除最后一個子節點

var formerLastChild=someNode.removeChild( someNode.las tChild);

與使用replaceChild()方法一樣，通過removeChild()移除的節點仍然為文檔所有，只不過在文檔中已經沒有自己的位置。

前面介紹的四個方法操作的都是某個節點的子節點，也就是說，要使用這幾個方法必須先取得父節點(使用parentNode屬性)。另外，并不是所有類型的節點都有子節點，如果在不支持子節點的節點上調用了這些方法，將會導致錯誤發生。

本文僅限內部技術人員學習交流,不得作于其他商業用途.原創文章出自:南昌網站建設公司-百恒網絡 http://m.51yjwy.com 如轉載請注明出處!