DOM操作-元素的增删改查_操作dom增删改-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_68348293/article/details/125831687

本文介绍了DOM操作的基本方法，包括使用querySelector获取元素、createElement创建元素、appendChild将元素添加到文档、innerHTML修改元素内容、remove删除元素以及cloneNode克隆元素。内容详细讲解了每个操作的实现和注意事项，对于理解和实践DOM操作具有指导意义。

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

元素的增删改查

(1) 获取

**var box=document.querySelector("#box")
	admin 于 2022/7/17 14:27 修改**

(2) 创建元素：这个元素是不会渲染到页面上的，他不在dom中：createElemen（）

var box2=document.createElement("div") //传入的字符串，是标签的名字
box2.className="box2 box3" //添加多个类名，不建议，适合添加一个
box2.classList.add="box2" //添加多个类名
box2.classList.add="box3"
box2.classList.add="box3" // 重复添加，只添加一次
    box2.classList.remove="box2"  //删除类名

（3）添加到文档树种，x.appendChild(y),把y节点对象添加到x节点中

 var box=box.appendChild(box2)
       var box3=document.createElement("div")

 box2.innerHTML="6666" //6666会把box2内部所有元素替换
    //    解决方案：创建一个元素，把666作为她的
innerHTML，然后把他添加到box2
    // box2.innerHTML=box2.innerHTML+"6666"

（4）删除元素：remove()

// 爸爸删儿子
    var box=document.querySelector("#box")
    box.parentElement.removeChild(box)
    // 自己删除自己
    box.remove()
    // 清空自己
    var box=document.querySelector("#box")
    box.parentElement.innerHTML=""

（5）克隆：cloneNode()

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