創建元素和文本節點
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