操作DOM节点：document.createElement、appendChild、insertBefore、removeChild、replaceChild、cloneNode（）_document.removechild

作者：羊村懒王 | 2024-03-05 11:47:10

踩

document.removechild

● 我们所说的操作无非就是增删改查；

● 创建一个节点以后，我们还需要将这个节点插入到另外的节点里面，不然就仅仅是创建了；

● 增：向页面中增加一个节点，首先要创建一个节点，然后再插入到页面中

● 删：删除页面中的一个节点

● 改：修改页面中的一个节点

● 查：获取页面中的一个节点

(1) 增、插：创建节点、插入节点

语法：

● 创建节点：document.createElement（要创建的节点）

● 插入节点：插入哪个节点里.appendChild（节点对象）//插入孩子节点

insertBefore（要插入的节点对象，在某个节点前面插入）//在某个节点前面插入，可以看成在任意位置插入

● 获取body里面的所有节点：document.body()

插入到body里：

document.body.appendChild(要插入的节点)


<body>
    <div id="box">
        <div>11111</div>
    </div>
    <script>
        var obox =document.createElement("div")//创建一个新的div节点
        obox.innerHTML = "2222"//给div节点赋值文本内容
        obox.classList = "box1"//因为obox是一个节点对象，所以可以创建类名
        
        //插入节点
        box.appendChild(obox)//给父div节点插入子div节点
        console.log(document.body)//获取body里面的所有节点
    </script>
</body>

结果：

看结果可发现插入成功了。。

box.insertBefore(obox,child)//在child节点对象前面插入obox对象

(2) 删除节点

语法：

删除节点：removeChild（节点对象）//删除孩子节点

remove() //删除自己以及后代


//删除子节点
box.removeChild(obox)//删除父节点对象box的子对象节点obox
//删除父节点及它的后代
box.remove()

(3) 替换节点：replaceChild（新的节点，老的节点）

box.replaceChild(obox,child)//用obox节点对象替换child节点对象

(4) 克隆节点：克隆以后还有插入到节点里面

语法：

cloneNode（false）：不克隆后代

cloneNode（true）：克隆后代


<body>
    <div id="box">
        <div id="child">11111</div>
    </div>
    <script>
        var oCloneBox = box.cloneNode(true)
        document.body.appendChild(oCloneBox)//插入到body里面
        console.log(document.body)
    </script>
</body>

结果：有两个div节点

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/190798