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是待删除的子节点，该方法返回被删除的子节点的引用。