在JS中动态创建，删除，克隆元素

在JS中动态创建，删除，克隆元素

createElement创建元素

createTextNode创建文本对象

appendChild把元素添加到容器的末尾

insertBefore把元素放到指定元素的前面

创建元素

  <div id="aaa">hahaha</div>
    <script>
        //动态创建一个元素对象
        let box=document.createElement('div');
        box.id='boxActive';
        box.style.width='200px'
        box.style.height='200px'
        box.className='RED'
        
        //动态创建一个文本节点
        let text=document.createTextNode('shangixiaolin');
        console.log(text);

        //添加 容器.appendChild(元素)
        box.appendChild(text)

        //添加到页面的后边
       // document.body.appendChild(box);

       //添加到指定元素的前边 容器.insertBefore(新增元素，指定元素)
        let haha=document.getElementById('aaa');
        //haha.parentNode.insertBefore(box,haha)
        document.body.insertBefore(box,haha)
    </script>

cloneNode(true/flase)深/浅克隆元素或者节点

removeChild移除容器中的某个元素

 <style>
        .box{
            margin-top: 20px;
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        .box span{
            color: red
        }
 </style>
 <div class="box">
        <span>yijecj</span>
    </div>
    <script>
        //clone node
        let box1=document.querySelector('.box')
        //第一份儿深克隆
        let box2=box1.cloneNode(true)
        //第二份儿浅克隆
        let box3=box1.cloneNode(false)
        document.body.appendChild(box2)
        document.body.appendChild(box3) 
        //  删除box2
        document.body.removeChild(box2)
    </script>

深/浅克隆box1
移除box盒子.png