在DOM看來，一個文件就是一棵節點樹，如果想在節點樹上新增內容，就必須插入新的節點。如果你想新增一些標記到文件，就必須插入元素節點。

1.createElement方法

   <div id="testdiv">
   </div>

    如果想把一段文字插入testdiv元素，用DOM語言就是想新增一個p元素節點，並把這個節點作為div節點的一個子節點。

    其中第一步驟則需要用到DOM方法createElement來完成。無論何時，只要使用了createElement方法，就應該把新創建出來的元素賦給一個變數就總是個好主意。

     變數para現在包含了一個指向剛創建出來的那個p元素的引用。雖然這個p元素已經存在，但它還不是任何一棵DOM節點樹的組成部分，這時候被稱為文件碎片，還無法顯示在瀏覽器的視窗畫面裡。

   window.onload=function(){
     var para=document.createElement("p");
     var info="nodeName:";
     info+=para.nodeName;
     info+="nodeType：";
     info+=para.nodeType;
     alert(info);
  }
 

2.appendChild方法

     把新建立的節點插入某個文件的節點樹的最簡單方法是：讓它成為這個文件某個現有節點的一個子節點。

  var testid=document.getElementById("testdiv");
  var para=document.createElement("p");
  testdiv.appendChild(para);

3.createTextNode方法

     如果需要建立一個文字節點，可以用createTextNode方法來實現。

  window.onload=function(){
     var para=document.createElement("p");
     var text=document.createTextNode("Hello world");
     var testdiv=document.getElementById("testdiv");
     para.appendChild(text);
     testdiv.appendChild(para);
   }

4.一個更復雜的組合

       在上一節介紹傳統方法中的innerHTML屬性中，我們使用瞭如下的HTML內容

  <p>This is <em>my</em> content.</p>

  window.onload=function(){
     var para=document.createElement("p");
     var text1=document.createTextNode("This is");
     para.appendChild(text1);
     var emphasis=document.createElement("em");
     para text2=document.createTextNode("my");
     emphasis.appendChild(text2);
     para.appendChild(emphasis);
     var text3=document.createTextNode("content.");
     para.appendChild(text3);
     var testdiv=document.getElementById("testdiv");
     testdiv.appendChild(para);
}