創建元素和文本節點

JavaScript沒有修改DOM中現成元素的能力，它只能創建新的元素並且將它們放在一個網頁中的任何位置。

解決方法

creatElement是允許你創建新元素的一個比較合適的方法。爭議只有一點——那就是你希望創建的元素的類型——並且返回新創建的元素的鏈結：

NewAnchor變數是一個新的a 元素，可以插入到網頁中。

通過XML MIME類型對文檔中的namespace進行說明

如果你的JavaScript變成是用於MIME類型application/xhtml+xml（或者其他類型的XML MIME類型）的文檔，你應該用createElementNS的方法，而不是用createElement：

這種區別適用於很多DOM方法，比如removeElement/removeElementNS以及getAttribute/getAttributeNS，但是，在我們的講解中，我們不會用這些方法的namespace-enhanced版本。

Simon Willison提供了在他的網站上同時使用JavaSxript和不同MIME類型的一個簡單的說明。

一個元素中的文本通常是那個元素的子文本節點，所以應該單獨創建。文本節點與元素節點不同，所以它們有自己的創建方法，create TextNode：

如果你修改一個現成的文本節點，你可以通過nodeValue屬性來接入它包含的文本。這就允許你獲得一個文本節點內部的文本：

OldText變數的值現在時“monoceros“，textNode內部的文本現在時“pyxis”。

你可以通過appendChild方法插入一個元素節點或者是一個文本節點。這種方法會將新的節點放在元素節點的所有子節點後面。

考慮如下的HTML片段：

我們可以使用DOM的方法來在段落的結尾創建和插入另一個鏈結：

Newchild變數的值將是新插入元素的reference。

如果我們在這段編碼execute into HTML編碼後翻譯DOM的狀態，可以這樣做：

我們並沒有明確說明新元素的屬性，所以當時它不會指向任何地方。在接下來的“讀和寫某個元素的屬性”一章中我們將詳細的進行說明。

討論

一個新的元素或者文本節點插入一個網頁中有三種基本的方法，你使用哪種方法取決於你希望新的節點插入哪里：作為一個元素的最後一個子節點，或者在另一個節點之前，或者替換某一個節點。增加一個元素所謂最後一個子節點的方法上面已經講過了。你可以通過insertBefore方法來在一個已經存在的節點之前插入一個節點，你也可以使用replacechild來替換一個父節點的子節點。

為了使用insertBefore，你需要指向你計畫插入的節點，以及希望插入在其前面的那個節點。看看如下的HTML編碼：

我們可以通過insertBefore在一個已經存在的節點前面插入一個新的連接：

NewChild變數指向新插入的元素。

如果我們希望在我們進行上面的操作完成之後，將DOM狀態翻譯成HTML，可以按照如下的操作：

我們可以用replacechild來完全替代已有的連接：

DOM應該是如下格式的：

推薦給同仁

 

您想要瞭解更多的免費小竅門以便提升你的網站排名嗎？
請馬上聯繫我們網站管理員:
MSN: chenlinwu@cmmail.com 
Email: info@rank-ad.com