JavaScript 中怎么利用DOM創(chuàng)建和克隆元素

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

createElement()和createTextNode()

createElement()和createTextNode()做的事情正如它們的名字所說的那樣。最常見的JavaScript DOM方法實(shí)戰(zhàn)-修改文檔樹中已經(jīng)用過它們。當(dāng)時(shí)的目的是把新創(chuàng)建的元素添加到文檔樹里，使它成為某個(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)都還沒有被插入文檔中。最常見的JavaScript DOM方法實(shí)戰(zhàn)-修改文檔樹中，用到的appendChild()或insertBefore()將它們附加到文檔樹中。例如：

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è)問題：它不能創(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>

不過，我們可以使用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ù)制，使你可以在隨后將其插入到文檔樹中。導(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)沒有遇到過想要克隆一個(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)注億速云行業(yè)資訊頻道。