javascript對DOM節點的建立--插入--刪除操做---appendChild()注意事項！

什麼是節點？

HTML文檔中，全部內容都是節點。

整個文檔，是一個文檔節點；每個html元素，是一個元素節點；每個html屬性，是屬性節點；每個註釋，是註釋節點；html內的文本，是文本節點。

DOM將HTML文檔被視爲樹結構，稱爲節點樹。

節點樹中全部節點均可經過js訪問或者修改。

節點樹中節點擁有層級關係---父（parent）、子（child）、同胞（sibling），父擁有子，同胞擁有相同的父。

 建立節點

document.creatElement('標籤名') 建立一個節點---標籤名不區分大小寫。

還有一種方法是複製已存在的節點，cloneNode()，括號裏面填寫true或false。false時，只執行一個淺複製，也就是說只複製做用的標籤，他的子元素不復制。

clonNode(true)時，結果以下：

 

clonNode(false)時，結果以下：

 

 

 插入節點

appendChild() 或者 insertBefore()

appendChild()在父元素上調用，把新元素插入到父元素中最後的位置。

insertBefore()在父元素上調用，接收兩個參數，參1：父元素中要添加的元素；參2：父元素中已存在的子元素。把要添加的元素放在哪一個元素的前面。

須要注意的是，調用這兩個方法時，若是將已經存在的節點再次插入，那麼原來位置的節點自動刪除，並在新的位置從新插入。

例：按照li標籤的內容，由大到小排列li。

代碼以下：

 執行以後的結果以下：

 數組arr中的li所有爲原來的li，並非新添加的li，因此appendChild()時，只是至關於從新排列了原來li的順序。

 而新建立一個li標籤時，就會在已經存在的元素基礎上增長一個。

 

刪除節點

removeChild()   ---  從文檔樹中刪除一個節點。    須要注意的是，該方法是在要刪除節點的父節點上調用，要刪除的節點做爲該方法的參數。

結果以下：

replaceChild() --- 刪除一個子節點，並用一個新節點取而代之。參1：新節點；參2：須要替代的節點。

例：給p標籤添加一個父元素div

 

結果以下：