JS中浅克隆与深克隆

浅克隆

浅克隆是只克隆当前元素本身，里面子元素不克隆

浅克隆代码

 <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>

深克隆图示