JS-节点的深浅度复制


    cloneNode()方法可以复制一个节点,该方法能够给节点创建一个副本。
    var ele = node.cloneNode(deep);
        deep是一个逻辑值:
            参数值为true时,复制的节点将包含多有子节点内容;
            参数值为false时,赋值的节点仅包含指定对象本身,不包含任何子节点。

<body>
    <button>复制</button>
    <button>深度复制</button>
    <button>删除节点</button>
    <hr>
    <select class="choices">
        <option value="">请选择数字</option>
        <option value="">1</option>
        <option value="">2</option>
        <option value="">3</option>
        <option value="">4</option>
        <option value="">5</option>
    </select>
    <script>
         var choices = document.querySelector('.choices')
         var btn = document.querySelectorAll('button')
         var options = document.querySelectorAll('option')
         var body = document.body
         
         btn[0].onclick = function(){
        // choices.children[0].cloneNode(false) 浅度复制select里的节点  
        // choices.appendChild 复制完后再放进父节点select
            choices.appendChild(choices.children[0].cloneNode(false))
            console.log(body);
         }
         btn[1].onclick = function(){
         // choices.children[0].cloneNode(false) 深度复制select里的节点  
         // choices.appendChild 复制完后再放进父节点select
            choices.appendChild(choices.children[5].cloneNode(true))
            console.log(body);
         }
        // 删除指定节点
         btn[2].onclick = function(){
            choices.removeChild(choices.children[4])
         }

    </script>

</body>


 

猜你喜欢

转载自blog.csdn.net/weixin_45959965/article/details/128350764