1.創(chuàng)建和增加節(jié)點(diǎn)
image.png
- 創(chuàng)建追加節(jié)點(diǎn)
可以使用最簡單的方法： 這樣就會(huì)追加一個(gè)div節(jié)點(diǎn)
document.body.innerHTML += '<div></div>';
但是這樣對于瀏覽器來說是很痛苦的,所以這樣：
var div02 = document.createElement('idv'); //創(chuàng)建元素
document.body.appendChild(div02);//追加節(jié)點(diǎn)
但是這樣： 你咋子做嘛？
<div id="div001" class="div001">
<p class="p001" id="p001">
世界你好,模板
</p>
</div>
答案:手動(dòng)添加節(jié)點(diǎn)： 這種做法瀏覽器是最輕松的但是你也是最痛苦的。
<script type="text/javascript">
window.onload=function(){
// 1.創(chuàng)建元素節(jié)點(diǎn)
var div01 = document.createElement('div');
// 2. 為元素節(jié)點(diǎn)創(chuàng)建屬性節(jié)點(diǎn)
div01.setAttribute('id','div001');
div01.setAttribute('class','div001');
// 3.創(chuàng)建第二個(gè)元素節(jié)點(diǎn)
var p01 = document.createElement('p');
// 4.為第二個(gè)元素節(jié)點(diǎn)創(chuàng)建屬性節(jié)點(diǎn)
p01.setAttribute('class','p001');
p01.setAttribute('id','p001');
// 5. 創(chuàng)建文本節(jié)點(diǎn)
var ptxt = document.createTextNode('世界你好,模板');
// 6.添加文本節(jié)點(diǎn)
p01.appendChild(ptxt);
// 7.添加元素節(jié)點(diǎn)
document.body.appendChild(div01);
// document.body.appendChild(p01);
div01.insertBefore(p01,div01.firstChild);
}
</script>
3.克隆節(jié)點(diǎn)
。true表示深度復(fù)制，就是復(fù)制全部。
。documentfragment克隆緩存機(jī)制,提升克隆效率。
<script type="text/javascript">
window.onload=function(){
var div02 = document.createElement('div');
div02.setAttribute('id','div02');
div02.setAttribute('class','divcss');
var txt = document.createTextNode('div02 content');
//屬性節(jié)點(diǎn)不用添加
//添加文本節(jié)點(diǎn)
div02.appendChild(txt);
//添加元素節(jié)點(diǎn)
document.body.appendChild(div02);
//緩存克隆
var df = document.createDocumentFragment();
for(var i=0;i<10;i++){
var div = div02.cloneNode(true);
div.setAttribute('id','div'+(i+3)) ;
df.appendChild(div);
}
document.body.appendChild(df);
}
</script>
<body>
</body>
image.png
4.克隆生成模板
