DOM — 元素的增删改查_document.queryselector拿到元素后怎么删除第一个子元素-优快云博客

本文链接：https://blog.youkuaiyun.com/z_2532040197/article/details/125810600

这篇博客详细介绍了如何使用JavaScript进行DOM操作，包括使用createElement创建元素，通过className或classList添加、删除类名，将元素添加到文档树，删除元素，以及使用cloneNode进行元素克隆。还展示了如何使用insertBefore方法插入节点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.创建元素：document.createElement（）用此方法创建的元素只保存在内存中，而不会渲染到页面上。

        // 创建一个div标签
        var box2 = document.createElement("div")
        // createElement()括号内填入的是要创建的标签名

2.给标签添加类名：

有两种方法：（1）直接使用 x.className给标签添加

        // 创建一个div标签
        // createElement()括号内填入的是要创建的标签名
        var box2 = document.createElement("div")
        
        // 添加类名
        box2.className = "box2"

（2）使用 x.classList.add（）方法，此方法的优点是可以多次调用，给元素添加多个类名，并且当多次调用添加的类名相同时，只会添加相同的一个类名

        // 创建一个div标签
        // createElement()括号内填入的是要创建的标签名
        var box2 = document.createElement("div")
        
        // 添加类名,给div设置了两个类名
        box2.classList.add("box2")
        box2.classList.add("box3")

并且要删除类名时，也可以调用 x.classList.remove（）来删除某个类名

        // 创建一个div标签
        // createElement()括号内填入的是要创建的标签名
        var box2 = document.createElement("div")
        
        // 添加类名,给div设置了两个类名
        box2.classList.add("box2")
        box2.classList.add("box3")
        // 删除一个类名
        box2.classList.remove("box3")

3. 将创建的元素添加到文档树中，也就是渲染到页面上。

使用 x.appendChild(y) 把y节点对象添加到x节点中

        // 获取
        var box = document.querySelector("#box")
        // 创建一个div标签
        // createElement()括号内填入的是要创建的标签名
        var box2 = document.createElement("div")
        
        // 添加类名
        // box2.className = "box2"
        box2.classList.add("box2")
        box2.classList.add("box3")
        // 删除一个类名
        box2.classList.remove("box3")
        // 添加到文档树
        box.appendChild(box2)

4.删除元素

（1）父元素删除子元素

        var box = document.querySelector("#box")
        // 1.父元素删除子元素
        box.parentElement.removeChild(box)

（2）元素自己移除

         var box = document.querySelector("#box")
         // 2.自己移除
         box.remove()

（3）元素直接全部清空自己

        var box = document.querySelector("#box")
        // 3.清空自己
        box.parentElement.innerHTML = ""

5.克隆： 使用 x.cloneNode() 方法

        var box = document.querySelector("#box")
        // var box2 = box.cloneNode(true) //参数为true，会连同box的后代元素和所有事件 一起克隆
        var box2 = box.cloneNode()  //不会克隆事件等
        box.appendChild(box2)

6.插入节点： x.insertBefore()

<body>
    
    <div class="box">
        <div class="box2">aaa</div>
        <div class="box2">bbb</div>
        <div class="box2">ccc</div>
        <div class="box2">ddd</div>
    </div>

    <script>

        var box = document.querySelector(".box")
        var a1 = document.createElement("h1")
        a1.innerHTML = 666
        // 在box的下标为2的子元素之前添加一个元素
        box.insertBefore(a1,box.children[2])

    </script>

</body>