在我們工作中大多數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>  

 #p#

在其他節點的前面插入一個節點

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>  

 #p#

輔助函數

appendChild()和insertBefore()都有2個參數，但是我們在應用的時候，還要注意參數的先后順序。既然這么麻煩我們還是自己寫一些輔助函數來代替原有的appendChild()和insertBefore()。在另一個元素之前插入元素的函數：

<script type="text/javascript"> 
//insertBefore()的代替方法  
function before( parent, before, elem ) {  
    // Check to see if no parent node was provided  
 //檢查parent是否傳入  
    if ( elem == null ) {  
        elem = before;  
        before = parent;  
        parent  = before.parentNode;  
    }  
   
    // Get the new array of elements  
 //獲取元素的新數組  
    var elems = checkElem( elem );  
   
    // Move through the array backwards,  
    // because we’re prepending elements  
 //向后遍歷數組  
 //因為我們向前插入元素  
    for ( var i = elems.length - 1; i >= 0; i-- ) {  
        parent.insertBefore( elems[i], before );  
    }  
}  
</script>  

為另一個元素添加一個子元素：

<script type="text/javascript"> 
//appendChild()的代替方法  
function append( parent, elem ) {  
    // Get the array of elements  
 //獲取元素數組  
    var elems = checkElem( elem );  
   
    // Append them all to the element  
 //把它們所有都追加到元素中  
    for ( var i = 0; i <= elems.length; i++ ) {  
        parent.appendChild( elems[i] );  
    }  
}  
</script>  

before和append的輔助函數：

<script type="text/javascript"> 
function checkElem( elem ) {  
    // If only a string was provided, convert it into a Text Node  
 //如果只提供字符串，那就把它轉換為文本節點  
    return elem && elem.constructor == String ?  
   document.createTextNode( elem ) : elem;  
}  
</script>  

注意：constructor的用法。

有時你可能需要對變量進行類型檢查，或者判斷變量是否已定義。有兩種方法可以使用：typeof函數與constructor屬性。typeof可以檢查到變量是否有定義，而construct只能檢查已定義變量的類型。

移除所有的子節點的輔助函數：

 <script type="text/javascript"> 
function empty( elem ) {   
 while (elem.firstChild){  
   remove(elem.firstChild);  
 }  
 /*  
 //我們可以使用firstChild來代替childNodes[0]  
 while (elem.childNodes[0])  
  remove(elem.childNodes[0]);  
 * /  
}  
   
function remove( elem ) {  
    if ( elem ) elem.parentNode.removeChild( elem );  
}  
</script> 

【編輯推薦】

1. JavaScript DOM實戰：創建和克隆元素
2. XML DOM新手入門指南
3. 在JavaScript中如何實現DOM操作