JavaScript第七章:DOM方法

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