這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)JavaScript 中怎么利用DOM創(chuàng)建和克隆元素,文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
創(chuàng)新互聯(lián)專注于企業(yè)營銷型網(wǎng)站建設(shè)、網(wǎng)站重做改版、藤縣網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、HTML5建站、商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù),價格優(yōu)惠性價比高,為藤縣等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
createElement()和createTextNode()
createElement()和createTextNode()做的事情正如它們的名字所說的那樣。最常見的JavaScript DOM方法實(shí)戰(zhàn)-修改文檔樹中已經(jīng)用過它們。當(dāng)時的目的是把新創(chuàng)建的元素添加到文檔樹里,使它成為某個元素的***一個子節(jié)點(diǎn)。
//創(chuàng)建一個li新元素 var newChild=document.createElement('li'); //創(chuàng)建一個a 新元素 var newLink=document.createElement('a') //創(chuàng)建一個 Text 節(jié)點(diǎn) var newText=document.createTextNode('My Wiki');
newChild指向新創(chuàng)建的
var nav=document.getElementById("nav"); //創(chuàng)建一個li新元素 var newChild=document.createElement('li'); //創(chuàng)建一個a 新元素 var newLink=document.createElement('a') //創(chuàng)建一個 Text 節(jié)點(diǎn) var newText=document.createTextNode('My Wiki'); //把Text添加到a元素節(jié)點(diǎn)中 newLink.appendChild(newText); //給a元素節(jié)點(diǎn)設(shè)置屬性href和內(nèi)容 newLink.setAttribute('href',"#"); //把a(bǔ)元素節(jié)點(diǎn)添加到新的li元素節(jié)點(diǎn)中 newChild.appendChild(newLink); //把新的li元素節(jié)點(diǎn)添加到 ul 元素節(jié)點(diǎn)里 nav.appendChild(newChild);
這先將文本節(jié)點(diǎn)附加到中,然后再將包含文本節(jié)點(diǎn)的附加到中。此時我的導(dǎo)航條ul中多了一個li子節(jié)點(diǎn)。
createTextNode()和HTML實(shí)體
createTextNode()有一個問題:它不能創(chuàng)建類似于€(€ 歐元符號)¥(¥ 人民幣符號) © (© 版權(quán)符號)“(“左雙引號)”(” 右雙引號)等,這樣的HTML實(shí)體元素。它會按字面創(chuàng)建文本,而不是創(chuàng)建你所需要的符號 。
不過,我們可以使用innerHTML來代替:
關(guān)于innerHTML屬性的用法,我們會在下一節(jié)中作為專題來具體的討論。
cloneNode()
cloneNode()方法克隆一個節(jié)點(diǎn),即它能對節(jié)點(diǎn)做一個***的復(fù)制,使你可以在隨后將其插入到文檔樹中。導(dǎo)航條HTML代碼:
我的導(dǎo)航條
測試cloneNode()
要想正確的使用cloneNode(),你必須了解它的一下二個特征:
1. cloneNode()接受一個可選值為true或false的參數(shù)。True 表示克隆元素和它的所有子節(jié)點(diǎn)。False表示克隆元素但不包含它的子節(jié)點(diǎn)。通常,我們在實(shí)踐中用true,我從來沒有遇到過想要克隆一個節(jié)點(diǎn)但不包含它的子節(jié)點(diǎn)的情形。
2. cloneNode()不會克隆事件處理程序。這相當(dāng)?shù)淖屓藧阑?,不知道這個方法是怎么定義的(原因我也不知道)所以每次你克隆一個節(jié)點(diǎn),你不得不在克隆上重新定義事件處理程序。
上述就是小編為大家分享的JavaScript 中怎么利用DOM創(chuàng)建和克隆元素了,如果剛好有類似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。