javascript之DOM更新操作

冰暮流星2026-04-16 12:34

创建一个节点

语法

document.createElement(html标签)

javascript 复制代码

//创建一个节点,要添加一个li标签
let a=document.createElement("li")
//在li标签里面添加"li4"文本
a.innerHTML="li4"

创建一个文本节点

语法：document.createTextNode(文本内容)

javascript 复制代码

//创建一个文本节点,比如"li4"
let b = document.createTextNode("li4")
//创建一个节点,比如li标签
let a = document.createElement("li")
//将文本节点添加到节点
a.appendChild(b)

将一个节点添加到节点中子节点末尾

语法 node.appendChild(newNode)

html 复制代码

<ul id="myul">
        <li id="first">li1</li>
        <li id="second">li2</li>
        <li>li3</li>
 </ul>

比如说要添加一个li标签

javascript 复制代码

//创建一个节点,要添加一个li标签
let a=document.createElement("li")
//在li标签里面添加"li4"文本
a.innerHTML="li4"
//获取节点
 let myul=document.getElementById("myul")
//添加节点内容
myul.appendChild(a)

将一个节点添加到节点的某一个子节点之前

语法：node.insertBefore(newNode,refNode)

还是上面的html代码，需要在类是second之前插入li标签

javascript 复制代码

//获取节点
let myul=document.getElementById("myul")
//设置要添加的节点及内容
 let a=document.createElement("li")
a.innerHTML="li4"
//在second之前添加节点a
myul.insertBefore(a,document.getElementById("second"))

更新节点

node.replaceChild(newNode,refNode)

比如要更新上面html的类名是second节点

javascript 复制代码

//获取节点
let myul=document.getElementById("myul")
//设置要准备替换的节点及内容
 let a=document.createElement("li")
a.innerHTML="li4"
//开始进行节点内容更新
myul.replaceChild(a,document.getElementById("second"))

删除节点中某个子节点

node.removeChild(refNode)

比如要删除上面html中second节点

javascript 复制代码

let myul=document.getElementById("myul")
//删除子节点
myul.removeChild(document.getElementById("second"))

删除某个节点

node.remove()

javascript 复制代码

document.getElementById("second").remove()