1.创建和增加节点
image.png
- 创建追加节点
可以使用最简单的方法： 这样就会追加一个div节点
document.body.innerHTML += '<div></div>';
但是这样对于浏览器来说是很痛苦的,所以这样：
var div02 = document.createElement('idv'); //创建元素
document.body.appendChild(div02);//追加节点
但是这样： 你咋子做嘛？
<div id="div001" class="div001">
<p class="p001" id="p001">
世界你好,模板
</p>
</div>
答案:手动添加节点： 这种做法浏览器是最轻松的但是你也是最痛苦的。
<script type="text/javascript">
window.onload=function(){
// 1.创建元素节点
var div01 = document.createElement('div');
// 2. 为元素节点创建属性节点
div01.setAttribute('id','div001');
div01.setAttribute('class','div001');
// 3.创建第二个元素节点
var p01 = document.createElement('p');
// 4.为第二个元素节点创建属性节点
p01.setAttribute('class','p001');
p01.setAttribute('id','p001');
// 5. 创建文本节点
var ptxt = document.createTextNode('世界你好,模板');
// 6.添加文本节点
p01.appendChild(ptxt);
// 7.添加元素节点
document.body.appendChild(div01);
// document.body.appendChild(p01);
div01.insertBefore(p01,div01.firstChild);
}
</script>
3.克隆节点
。true表示深度复制，就是复制全部。
。documentfragment克隆缓存机制,提升克隆效率。
<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');
//属性节点不用添加
//添加文本节点
div02.appendChild(txt);
//添加元素节点
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.克隆生成模板
