DOM中改变文档的层次结构

  DOM中所有的元素都是以树形结构存储的，不同的元素处于不同的层次，比如根目录，一级目录，二级目录等。

  1.使用document.createElement方法创建元素节点

     document.createElement(elementName);

   其中document即文档对象，elementName是所要创建的节点的标记名称，例如要创建一个<div>节点，可以使用如下语句实现。

     var divElement = document.createElement("div");

  2.使用document.createTextNode方法创建文本节点

    document.createTextNode(text);

   其中text是要创建的文本节点中的文本值。这里的文本就是纯文本，不要经过HTML的转义，例如：

    document.createTextNode("<hello>");

    当将此文本节点直接显示时，它会正确地显示尖括号，而不用进行HTML编码。

3.使用appendChild方法添加节点

    在创建了节点以后，可以使用appendChild方法将其添加到文档层次结构中，其语法如下：

    parentElement.appendChild(childElement);

  其中，parentElement是父节点的引用，childElement是要添加的子节点的引用。该方法返回对新节点的引用。

4.使用insertbefore节点插入子节点

   appendChild方法只能将节点添加到所有的字节带你之后，而insertBefore方法则可以将节点插入到指定的节点之前，其语法如下：

   parentNode.insertBefore(newNode,referenceNode);

   其中parentNode是父节点，newNode是待插入的新节点，referenceNode是父节点中已存在的节点，新节点将插入此节点之前。该方法返回新节点的引用。

5. 使用replaceChild方法取代子节点

    该方法可以讲一个节点用另一个节点来取代，其语法如下：

   parentNode.replaceChild(newNode,oldChild); 

6.使用cloneChild方法复制节点

    有时需要复制一个节点到另一个位置，例如在实现Web元素的拖放效果时，通常需要被被拖动节点的内容赋值，cloneChild方法可以实现节点的复制：

    node.cloneChild(includeChildren);

    其中node是待复制的节点，includeChildren是一个布尔值，表示是否复制子节点。该方法的返回值是复制得到的新节点。

7.使用removeChild方法删除子节点

    该方法可以用来删除一个子节点：

    parentNoderemoveChild(childNode);

    其中parentNode是父节点，childNode是待删除的子节点，该方法返回被删除的子节点的引用。