JavaScript DOM实战：创建和克隆元素

//创建一个li新元素  
var newChild=document.createElement('li');  
//创建一个a 新元素  
var newLink=document.createElement('a')  
//创建一个 Text 节点  
var newText=document.createTextNode('My Wiki');  

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

测试cloneNode()

 
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);  
}  
 

要想正确的使用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的本质及操作方法