JavaScript DOM修改文档树方法实例(1)

在我们工作中大多数DOM脚本的主要任务就是在DOM文档中插入，删除和移动节点。W3C DOM 提供了4种方法来修改文档树。常用的是appendChild()和insertBefore(),而removeChild() 和replaceChild()很少用到。

一般用法

修改文档提供的4个方法，都是指向它们所作用的节点的引用。导航条实例：

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

appendChild()

appendChild()方法让你添加一个节点并使其成为某个元素的最后一个子节点。如果添加的该节点已经存在于文档中，它会从当前位置移除。该节点的子节点保持不变，它们也被一起移动到新的位置。

<script type="text/javascript"> 
window.onload=function(){  
  /*为一个元素添加子元素*/  
  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);  
   
  /*<li>从原始位置上被移除，成为ul的最后一个子节点。它的a 元素节点和文本节点HODE也被移了过来*/  
  navnav_list=nav.getElementsByTagName("li");//返回相同的一组元素  
  nav.appendChild(nav_list[0]);  
}  
</script>  

创建新DOM元素的通用函数

<script type="text/javascript"> 
function create( elem ) {  
    return document.createElementNS ?  
        document.createElementNS( 'http://www.w3.org/1999/xhtml', elem ) :  
        document.createElement( elem );  
}  
   
</script>  

我们看到结果：

添加好的子节点

从原始位置上被移除，成为ul的最后一个子节点

insertBefore()

insertBefore()方法允许你在其他节点的前面插入一个节点，所以当你想要添加一个子节点，但又不希望该节点成为最后一个子节点的时候，就可以使用此方法。就像appendChild()方法一样，如果插入的节点已经存在于文档之中，它会被从当前位置移除，而且该节点在被插入之后乃保持它的子节点结构。

<script type="text/javascript"> 
window.onload=function(){  
  var nav=document.getElementById("nav");  
  navnav_list=nav.getElementsByTagName("li");//返回相同的一组元素  
  //第一个节点  
  var x=nav_list[0];  
  //最后一个节点  
  var y=nav_list[nav_list.length-1]  
  //在x元素对象之前插入y元素对象  
  nav.insertBefore(y,x);  
  //在x元素对象之前插入新生产的newChild元素对象  
  nav.insertBefore(newChild,x);//newChild元素对象的创建请参考上面的代码  
}  
</script>