看出 true 和false的區(qū)別了吧。
true的話：是<p>hello world</p> 克隆。
false： 只克隆 <p></p> ，里面的文本不克隆。
和createElement()一樣，克隆后的新節(jié)點(diǎn) 不會被自動插入到文檔 。需要appendChild();
另外還有一個注意： 如果克隆后，id一樣，不要忘記用 setAttribute(“id” , “ new_id “);
來 改變新的節(jié)點(diǎn)的ID。

4，    插入節(jié)點(diǎn)。appendChild():
前面都用到幾次了， 應(yīng)該大概的用法都知道了。
具體解釋就是：
給元素追加一個子節(jié)點(diǎn)， 新的節(jié)點(diǎn) 插入到 最后。
var container = document.createElement("p");
var t =  document.createTextNode("cssrain");
container.appendChild(t);
document.body.appendChild(container);

另外 appendChild()不僅可以用來追加新的元素，也可以你 挪動 文檔中現(xiàn)有的元素。
看下面的例子：
<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>
//發(fā)現(xiàn)msg放到 content 后面去了 。
Js內(nèi)部處理方式：
先把ID為msg的從文檔中刪除，然后再插入到content 后，作為content的最后一個節(jié)點(diǎn) 插入。
結(jié)果為：
<p id="content">
content
<p id="msg">msg</p>
</p>
<p id="aaa">aaaaaaaa</p>

5，    插入節(jié)點(diǎn)。insertBefore():
顧名思義，就是把一個新的節(jié)點(diǎn)插入到目標(biāo)節(jié)點(diǎn)的前面。
Element.insertBefore( newNode  ,  targerNode );
// 注意 第一個參數(shù) 是新的節(jié)點(diǎn)， 后面是目標(biāo)節(jié)點(diǎn)（插入的位置）。
// 新節(jié)點(diǎn)是客人，肯定先服務(wù)他咯。。。 ^_^

第二個參數(shù)是可選，如果第二個參數(shù)不寫，將默認(rèn)添加到文檔的最后，相當(dāng)于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>
// 我們發(fā)現(xiàn)ID為msg的 插入到了  aaa的前面。
Js內(nèi)部處理方式跟 appendChild()相似。也是：
先把ID為msg的從文檔中刪除，然后再插入到 aaa 前，作為aaa的前面一個節(jié)點(diǎn) 插入。


大家自己動動手寫寫，不然光看記憶性不好。
好了，講到這里，明天繼續(xù)講。
今天講了 用dom方式 創(chuàng)建節(jié)點(diǎn)，復(fù)制節(jié)點(diǎn)，插入節(jié)點(diǎn)。
明天我們將講 刪除節(jié)點(diǎn)，替換節(jié)點(diǎn)，查找節(jié)點(diǎn)等。。。。。。


如果還有不懂，可以google 搜索資料. 

最新評論