JavaScript如何利用DOM創(chuàng)建和克隆元素

今天小編給大家分享一下JavaScript如何利用DOM創(chuàng)建和克隆元素的相關(guān)知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

createElement()和createTextNode()

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

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

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

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é)點  var newText=document.createTextNode('My Wiki');  //把Text添加到a元素節(jié)點中  newLink.appendChild(newText);  //給a元素節(jié)點設(shè)置屬性href和內(nèi)容  newLink.setAttribute('href',"#");  //把a元素節(jié)點添加到新的li元素節(jié)點中  newChild.appendChild(newLink);  //把新的li元素節(jié)點添加到 ul 元素節(jié)點里  nav.appendChild(newChild);

這先將文本節(jié)點附加到<a>中，然后再將包含文本節(jié)點的<a>附加到<li>中，***把包含<a>和文本的<li>附加到<ul>中。此時我的導(dǎo)航條ul中多了一個li子節(jié)點。

createTextNode()和HTML實體

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

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

不過，我們可以使用innerHTML來代替：

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

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

cloneNode()

cloneNode()方法克隆一個節(jié)點，即它能對節(jié)點做一個***的復(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>

測試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(),你必須了解它的一下二個特征：

1. cloneNode()接受一個可選值為true或false的參數(shù)。True 表示克隆元素和它的所有子節(jié)點。False表示克隆元素但不包含它的子節(jié)點。通常，我們在實踐中用true,我從來沒有遇到過想要克隆一個節(jié)點但不包含它的子節(jié)點的情形。

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

以上就是“JavaScript如何利用DOM創(chuàng)建和克隆元素”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。