JavaScript dom 動態建立標記

此前的大多數DOM都是用來查找元素，getElementById和getElementsByTagName均可以方便快捷的找到文檔中的某個或者某些特定的元素節點，這些元素隨後能夠用諸如setAttribute（改變某個屬性的值）和nodeValue（改變某個元素節點所包含的文本）之類的方法和屬性來處理。都是對已經存在的元素作出修改。

 

本文將經過建立新元素和修改現有元素來改變網頁結構

 

標準的DOM方法能夠用來替代innerHTML，他提供了更高的精確性和更強大的功能！

DOM方法：

瀏覽器顯示的內容其實都是屬於DOM節點樹的，在瀏覽器看來，DOM節點樹纔是文檔

動態建立標記不是在建立標記，而是在改變DOM節點樹。

在DOM看來，一個文檔就是一顆節點樹。若是你想要從節點數上添加內容，就必須插入新的節點。若是你想添加一些標記到文檔，就必須插入元素節點

 

createElement方法：建立元素節點（諸如<p>,<a>,<span>......）

格式：document.createElement("標籤名")；

新建立出來的標籤已經存在了，可是還不屬於任何一顆DOM節點數的組成部分，他只是在js世界的一個孤兒而已，稱爲：文檔碎片（document fragment）

其nodeName=p，nodeType=1

createTextNode方法：建立文本節點（即添加標籤內的內容）

格式：document.createTextNode("內容")；

 

appendChild方法：鏈接（把遊離在js世界的孤兒，加入到節點樹，找到他的家）

格式：parent.appndChild(child)；

 

有兩個順序方法：

1. 先建立標籤，而後把標籤追加到節點樹種，再建立內容，把內容追加到標籤後面

2. 見建立標籤，在建立內容，把內容追加到標籤裏面，而後把標籤再追加到節點樹中

　　本人比較喜歡第二種寫法，感受思路會比較清晰　　

 

例子：在body裏面添加一個p標籤，在p裏面建立一個em標籤，內容是：<p>This is <em>my</em> content</p>;

 

 

特別提醒：使用appendChild屬性插入文本內容不會把以前標籤的內容覆蓋掉，這個能夠與innerHTML對比一下

 

從上面截圖能夠發現一個新的問題：<p>標籤插在了<script>標籤以後，由於插入的標籤都是默認自動會排在全部子節點以後 這時咱們須要新的方法來控制元素插入的位置；

 

 

元素插入位置設置：

 

insertBofore()方法：這個方法將把一個新元素插入到一個現有元素的前面；

格式：parentElement(目標元素的父元素).insertBefore(newElement(新元素),targetElement(目標元素))

介紹：parentNode：獲取文檔層次中的父對象

技巧：其實並不須要麻煩去找目標元素的父元素，能夠利用parentNode，目標元素的父元素 = targetElement.parentNode

 

惋惜的是：咱們有一個insertBefore的方法，卻沒有一個insertAfter的方法；可是咱們能夠本身寫一個insertAfter()函數來代替

insertAfter()函數：

思路：

1. 判斷目標元素是不是parent的最後一個元素，
2. 若是是，則使用appenChild把新元素插在目標元素以後
3. 若是不是，則使用insertBofore把新元素插在目標元素的下一個子元素以前。

介紹：nextSibling屬性：表示當前節點的下一個節點（其後的節點與當前節點同屬一個級別）；若是其後沒有與其同級的節點，則返回null。