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

在其他节点的前面插入一个节点

replaceChild()

replaceChild()方法允许你把一个节点替换为另一个节点。就像appendChild()和insertBefore()一样，如果插入的节点已经存在于文档之中，它会被从当前位置移除，而且该节点在被插入之后乃保持它的子节点结构。

<script type="text/javascript"> 
window.onload=function(){  
  var nav=document.getElementById("nav");  
  navnav_list=nav.getElementsByTagName("li");//返回相同的一组元素  
  //第一个节点对象  
  var x=nav_list[0];  
  //x节点对象被newChild新节点对象替换了  
  nav.replaceChild(newChild,x);  
}  
</script>  

把一个节点替换为另一个节点

removeChild()

removeChild()方法允许你移除一个节点以及它的子节点们。

<script type="text/javascript"> 
window.onload=function(){  
  var nav=document.getElementById("nav");  
  navnav_list=nav.getElementsByTagName("li");//返回相同的一组元素  
  //最后一个节点  
  var y=nav_list[nav_list.length-1]  
  //移除最后面的一个节点  
  nav.removeChild(y);  
}  
</script>  

你移除一个节点以及它的子节点们

移除所有的子节点

有的时候你需要把一个元素清除干净；你想在添加新节点前清除原来的所有子点。有两个简单的方法来做这件事情：

<script type="text/javascript"> 
 while (x.childNodes[0]){  
  x.removeChild(x.childNodes[0]);  
 }  
   
 /*  
 //我们可以使用firstChild来代替childNodes[0]  
  while (x.firstChild){  
  x.removeChild(x.firstChild);  
 }  
 * /  
</script>  

这是一个简单的while()循环，只要元素存在第一个节点（childNodes[0]），它就移除这个节点，接着节点集合立即更新。所以（原来的）第二个节点成为了第一个节点，循环就会一直重复，直到X没有子节点为止。另一个方法就简单了

<script type="text/javascript"> 
x.innerHTML='';  
</script>