這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)JavaScript 中怎么利用DOM創(chuàng)建和克隆元素，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)專注于企業(yè)營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站重做改版、藤縣網(wǎng)站定制設(shè)計(jì)、自適應(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)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為藤縣等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

createElement()和createTextNode()

createElement()和createTextNode()做的事情正如它們的名字所說(shuō)的那樣。最常見(jiàn)的JavaScript DOM方法實(shí)戰(zhàn)-修改文檔樹(shù)中已經(jīng)用過(guò)它們。當(dāng)時(shí)的目的是把新創(chuàng)建的元素添加到文檔樹(shù)里，使它成為某個(gè)元素的***一個(gè)子節(jié)點(diǎn)。

//創(chuàng)建一個(gè)li新元素  var newChild=document.createElement('li');  //創(chuàng)建一個(gè)a 新元素  var newLink=document.createElement('a')  //創(chuàng)建一個(gè) Text 節(jié)點(diǎn)  var newText=document.createTextNode('My Wiki');

newChild指向新創(chuàng)建的<li>元素對(duì)象，newLink指向新創(chuàng)建的<a>元素對(duì)象,而newText指向新創(chuàng)建的文本節(jié)點(diǎn)對(duì)象。這些節(jié)點(diǎn)都還沒(méi)有被插入文檔中。最常見(jiàn)的JavaScript DOM方法實(shí)戰(zhàn)-修改文檔樹(shù)中，用到的appendChild()或insertBefore()將它們附加到文檔樹(shù)中。例如：

var nav=document.getElementById("nav");  //創(chuàng)建一個(gè)li新元素  var newChild=document.createElement('li');  //創(chuàng)建一個(gè)a 新元素  var newLink=document.createElement('a')  //創(chuàng)建一個(gè) 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)附加到<a>中，然后再將包含文本節(jié)點(diǎn)的<a>附加到<li>中，***把包含<a>和文本的<li>附加到<ul>中。此時(shí)我的導(dǎo)航條ul中多了一個(gè)li子節(jié)點(diǎn)。

createTextNode()和HTML實(shí)體

createTextNode()有一個(gè)問(wèn)題：它不能創(chuàng)建類似于&euro;（&euro; 歐元符號(hào)）&yen;（&yen; 人民幣符號(hào)） &copy; （&copy; 版權(quán)符號(hào)）&#8220;（“左雙引號(hào)）&#8221;（” 右雙引號(hào)）等，這樣的HTML實(shí)體元素。它會(huì)按字面創(chuàng)建文本，而不是創(chuàng)建你所需要的符號(hào) 。

<script  type="text/javascript"> window.onload=function(){   var x=document.createTextNode("&copy; Copyrights reserved");   document.getElementById("test").appendChild(x);  }  </script>

不過(guò)，我們可以使用innerHTML來(lái)代替：

<script  type="text/javascript"> window.onload=function(){   document.getElementById("test").innerHTML="&copy; Copyrights reserved";  }  </script>

關(guān)于innerHTML屬性的用法，我們會(huì)在下一節(jié)中作為專題來(lái)具體的討論。

cloneNode()

cloneNode()方法克隆一個(gè)節(jié)點(diǎn)，即它能對(duì)節(jié)點(diǎn)做一個(gè)***的復(fù)制，使你可以在隨后將其插入到文檔樹(shù)中。導(dǎo)航條HTML代碼：

<div id="menu">     <h2>我的導(dǎo)航條</h2>                <ul id="nav">        <li><a href="#">HOME</a></li>        <li><a href="#">(X)Html / Css</a></li>        <li><a href="#">Ajax / RIA</a></li>        <li><a href="#">GoF</a></li>        <li><a href="#">JavaScript</a></li>        <li><a href="#">JavaWeb</a></li>        <li><a href="#">jQuery</a></li>        <li><a href="#">MooTools</a></li>        <li><a href="#">Python</a></li>        <li><a href="#">Resources</a></li>     </ul> </div>

測(cè)試cloneNode()

<script  type="text/javascript"> window.onload=function(){       var nav_list=[];    var nav=document.getElementById("nav");       navnav_list=nav.getElementsByTagName("li");    var x=nav_list[0];    var y=x.cloneNode(true);    nav.appendChild(y);  }  </script>

要想正確的使用cloneNode(),你必須了解它的一下二個(gè)特征：

1. cloneNode()接受一個(gè)可選值為true或false的參數(shù)。True 表示克隆元素和它的所有子節(jié)點(diǎn)。False表示克隆元素但不包含它的子節(jié)點(diǎn)。通常，我們?cè)趯?shí)踐中用true,我從來(lái)沒(méi)有遇到過(guò)想要克隆一個(gè)節(jié)點(diǎn)但不包含它的子節(jié)點(diǎn)的情形。

2. cloneNode()不會(huì)克隆事件處理程序。這相當(dāng)?shù)淖屓藧阑穑恢肋@個(gè)方法是怎么定義的（原因我也不知道）所以每次你克隆一個(gè)節(jié)點(diǎn)，你不得不在克隆上重新定義事件處理程序。

上述就是小編為大家分享的JavaScript 中怎么利用DOM創(chuàng)建和克隆元素了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享題目：JavaScript中怎么利用DOM創(chuàng)建和克隆元素
URL標(biāo)題：http://chinadenli.net/article46/gepeeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開(kāi)發(fā)、定制網(wǎng)站、服務(wù)器托管、關(guān)鍵詞優(yōu)化、標(biāo)簽優(yōu)化、網(wǎng)站營(yíng)銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)