JavaScript DOM 节点操作详解：创建、复制、插入、删除与替换

创建节点：元素与文本节点

1. 创建节点。

createElement():

var a = document.createElement("p");

它创建的是一个元素节点，因此 nodeType 等于 1。

a.nodeName 将返回 p;

注意：createElement()方法创建的新元素节点不会自动添加到文档中，由于未加入文档，它处于游离状态，因此没有 nodeParent 属性。

若要将其添加到文档中，可使用 appendChild()、insertBefore() 或 replaceChild() 方法。当然，我们在前面的例子中自己编写了一个 insertAfter() 方法;

例如：

var a = document.createElement("p");

document.body.appendChild(a);

注意：appendChild() 默认将节点添加到文档末尾，即作为 lastChild 子节点。

若需插入到指定位置，可使用 insertBefore()。

若想在元素插入前为其添加属性，可执行以下操作：

var a = document.createElement("p");

a.setAttribute("title","my demo");

document.body.appendChild(a);

createTextNode():

var b = document.createTextNode("my demo");

它创建的是一个文本节点，因此 nodeType 等于 3。

b.nodeName 将返回 #text;

与 createElement() 类似，用 createTextNode() 创建的节点也不会自动添加到文档中，需使用 appendChild()、insertBefore() 或 replaceChild() 方法。

它常与 createElement() 配合使用，原因何在？（一个元素节点，一个文本节点。）

var mes = document.createTextNode("hello world");

var container = document.createElement("p");

container.appendChild(mes);

document.body.appendChild(container);

复制节点：cloneNode参数详解

2. 复制节点。

cloneNode(boolean) :

它包含一个参数。

var mes = document.createTextNode("hello world");

var container = document.createElement("p");

container.appendChild(mes);

document.body.appendChild(container);

var newpara = container.cloneNode(true);//true 和 false 的区别

document.body.appendChild(newpara );

注意：

若为 true：则是 <p>aaaa</p> 的完整克隆。

若为 false：仅克隆 <p></p>，内部文本不会被克隆。

可自行编写示例，并使用 firebug 查看效果。

克隆后的新节点与 createTextNode() 创建的节点一样，不会自动插入到文档中，需调用 appendChild();

另需注意：若克隆后 ID 相同，别忘了使用 setAttribute("id" , " another_id ");

以修改新节点的 ID。

插入节点：appendChild与insertBefore用法

3. 插入节点。

appendChild() :

向元素追加子节点，新节点插入到末尾。

var container = document.createElement("p");

var t = document.createTextNode("cssrain");

container.appendChild(t);

document.body.appendChild(container);

它常与 createElement()、createTextNode()、cloneNode() 配合使用。

此外，appendChild() 不仅可用于追加新元素，还可用于移动文档中现有的元素。

参考以下示例：

<p id="msg">msg</p>

<p id="content">content</p>

<p id="aaa">aaaaaaaa</p>

<script>

var mes = document.getElementById("msg");

var container = document.getElementById("content");

container.appendChild(mes);

</script>

// 发现 msg 被放置到了 content 后面。

Js 内部处理机制：

先将 ID 为 msg 的节点从文档中移除，然后再插入到 content 之后，作为 content 的最后一个子节点。

结果如下：

<p id="content">

content

<p id="msg">msg</p>

</p>

<p id="aaa">aaaaaaaa</p>

insertBefore() :

顾名思义，即将新节点插入到目标节点之前。

Element.insertBefore( newNode , targerNode );

第二个参数为可选，若未提供第二个参数，则默认添加到文档末尾，等同于 appendChild();

我们来看看 insertBefore() 的具体用法：

<div id="cssrian">

<p id="content">1111</p>

<div id="msg">msg<div>test</div></div>

<p id="content">222</p>

<p id="aaa">aaaaaaaa</p>

</div>

<script>

var msg = document.getElementById("msg");

var aaa = document.getElementById("aaa");

var test = document.getElementById("cssrian");

test.insertBefore( msg , aaa );

</script>

// 我们发现 ID 为 msg 的节点被插入到了 aaa 的前面。

Js 内部处理机制与 appendChild() 相似。

删除节点：removeChild与parentNode应用

4. 删除节点。

removeChild() :

<body>

<div id="cssrain">

<div id="a">a </div>

<div id="b">b </div>

<div id="c">c </div>

</div>

</body>

<script>

var msg = document.getElementById("cssrain");

var b = document.getElementById("b");

msg.removeChild(b);

</script>

若不清楚要删除节点的父节点，可使用 parentNode 属性。

例如：

<body>

<div id="cssrain">

<div id="a">a </div>

<div id="b">b </div>

<div id="c">c </div>

</div>

</body>

<script>

var b = document.getElementById("b");

var c = b.parentNode;

c.removeChild(b);

</script>

注意：若想将某个节点从一处移动到另一处，无需使用 removeChild（）。

可直接使用前述的 appendChild() 和 insertBefore()，它们会自动先删除节点，再将其移动至指定位置。、

替换节点：replaceChild方法

5. 替换节点。

Element.repalceChild( newNode , oldNode );

OldNode 必须是 Element 的一个子节点。

<body>

<div id="cssrain">

<div id="a">a </div>

<div id="b">b </div>

<div id="c">c </div>

</div>

</body>

<script>

var cssrain = document.getElementById("cssrain");

var msg = document.getElementById("b");

var para = document.createElement("p");

cssrain.replaceChild( para , msg );

</script>