DOM允許你創建自己的元素和文本節點，并把它們添加大文檔樹中。理論上上說，你可以從樹中移除所有的元素，創建新元素，或者重整文檔樹，從而完全改變頁面。但是在實踐中，這個特性用起來有些限制。DOM也允許你克隆現有的元素，已便你能方便地復制文檔的某一部分并在文檔中分發副本。

51CTO推薦閱讀：JavaScript DOM的本質及操作方法

createElement()和createTextNode()

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

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

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

var nav=document.getElementById("nav");  
//創建一個li新元素  
var newChild=document.createElement('li');  
//創建一個a 新元素  
var newLink=document.createElement('a')  
//創建一個 Text 節點  
var newText=document.createTextNode('My Wiki');  
//把Text添加到a元素節點中  
newLink.appendChild(newText);  
//給a元素節點設置屬性href和內容  
newLink.setAttribute('href',"#");  
//把a元素節點添加到新的li元素節點中  
newChild.appendChild(newLink);  
//把新的li元素節點添加到 ul 元素節點里  
nav.appendChild(newChild);  

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

createTextNode()和HTML實體

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

<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>  

關于innerHTML屬性的用法，我們會在下一節中作為專題來具體的討論。

cloneNode()

cloneNode()方法克隆一個節點，即它能對節點做一個***的復制，使你可以在隨后將其插入到文檔樹中。導航條HTML代碼：

<div id="menu"> 
    <h1>我的導航條</h1>            
    <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的參數。True 表示克隆元素和它的所有子節點。False表示克隆元素但不包含它的子節點。通常，我們在實踐中用true,我從來沒有遇到過想要克隆一個節點但不包含它的子節點的情形。

2. cloneNode()不會克隆事件處理程序。這相當的讓人惱火，不知道這個方法是怎么定義的（原因我也不知道）所以每次你克隆一個節點，你不得不在克隆上重新定義事件處理程序。

原文地址：http://cssrainbow.cn/tutorials/javascript/589.html

【編輯推薦】

1. 大話HTML DOM與XML DOM的區別與聯系
2. XML DOM新手入門指南
3. JavaScript DOM的本質及操作方法