js动态增删克隆元素

createElement 创建元素对象
createTextNode 创建文本节点
appendChild把元素添加到容器末尾
insertBefore把元素添加到指定容器中指定元素的前面

<script>
        //动态创建一个DIV元素对象，把其赋给BOX
        let box = document.createElement('div');
        box.id = 'boxActive';
        box.style.width = '200px';
        box.style.height = '200px';
        box.className= 'RED';
        
        // 动态创建一个文本
        let text = document.createTextNode('js练习')

        // 添加: 容器.appendChild(元素)
        box.appendChild(text);
        // document.body.appendChild(box);

        // 放到指定元素前：容器.insertBefore([新增元素],[指定元素])
        let hh = document.getElementById('hh');
        // hh.parentNode.insertBefore(...)
        document.body.insertBefore(box, hh);
</script>

cloneNode（true/false）克隆元素或节点
removeChild移除容器中某个元素

    <div class="box">
        <span>dom操作练习</span>
    </div>
    <script>
        let box1 = document.querySelector('.box');
        // 克隆第一份(深克隆)
        let box2 = box1.cloneNode(true);
        box2.querySelector('span').innerText = 'jsdom训练2'
        // 克隆第二份（浅克隆）
        let box3 = box1.cloneNode(false);
        box3.innerHTML="<span>jsdom训练3</span>";
        
        document.body.appendChild(box2);
        document.body.appendChild(box3);

        // ===========
        // 容器.removeChild(元素)
        document.body.removeChild(box2);
    </script>