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>

轉載于:https://www.cnblogs.com/rongxh7/archive/2010/05/23/1742315.html

總結

以上是生活随笔為你收集整理的dom复制cloneNode节点与插入节点appendChild()的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。