浅克隆
浅克隆是只克隆当前元素本身,里面子元素不克隆
浅克隆代码
<div id="box">
<p class="child1">11</p>
<button class="child2">点我</button>
</div>
<script>
window.onload = function (){
var box = document.getElementById('box');
//克隆标签
var newBox1 = box.cloneNode(); //浅克隆
console.log(newBox1);
document.body.appendChild(newBox1);
}
</script>
浅克隆图示
深克隆
深克隆是既克隆当前元素本身,又将里面所有子元素都克隆
深克隆代码
<div id="box">
<p class="child1">11</p>
<button class="child2">点我</button>
</div>
<script>
window.onload = function (){
var box = document.getElementById('box');
//克隆标签
//深克隆 既克隆当前元素本身 又将里面所有子元素都克隆
var newBox2 = box.cloneNode(true);
console.log(newBox2);
//追加
document.body.appendChild(newBox2);
//注意:一般情况下不克隆带有id的元素 因为带有id的元素应该是唯一的
}
</script>
深克隆图示