dom复制cloneNode节点与插入节点appendChild()

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。

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>