JavaScript DOM节点操作：更新、插入与删除详解

作者：竹影时间：2026-10-22 05:24:21浏览：94

本文详细介绍JavaScript中DOM节点的三大核心操作。首先讲解如何更新节点，对比innerHTML、innerText与textContent的区别及CSS样式修改方法；其次阐述插入新节点，包括使用appendChild和insertBefore在指定位置添加元素；最后说明删除节点的注意事项，特别是遍历删除时children属性动态变化的陷阱。

本文内容主要涉及JavaScript中DOM节点的插入、更新与删除操作，供读者参考学习。

更新节点

获取到目标DOM节点后，即可对其进行各类更新操作。

修改节点文本主要有两种实现方式：

第一种方式是修改innerHTML属性。该方式功能强大，不仅能修改DOM节点的文本内容，还能通过HTML片段直接修改节点内部的子树结构。


// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置文本为abc:
p.innerHTML = 'ABC'; // <p id="p-id">ABC</p>
// 设置HTML:
p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';
// <p>...</p>的内部结构已修改

使用innerHTML时需特别注意是否需写入HTML内容。若字符串来源于网络获取，必须进行字符编码处理以防范XSS攻击。第二种方式是修改innerText或textContent属性，这两种方式会自动对字符串进行HTML编码，从而确保无法设置任何HTML标签。


// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置文本:
p.innerText = '<script>alert("Hi")</script>';
// HTML被自动编码，无法设置一个<script>节点:
// <p id="p-id">&lt;script&gt;alert("Hi")&lt;/script&gt;</p>

两者在读取属性时存在差异：innerText不会返回隐藏元素的文本，而textContent会返回所有文本。此外需注意，IE9以下版本不支持textContent属性。修改CSS样式也是常见需求，DOM节点的style属性对应所有CSS样式，可直接获取或设置。由于CSS属性名如font-size并非JavaScript有效属性名，因此在JavaScript中需改写为驼峰式命名fontSize。


// 获取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 设置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px';
p.style.paddingTop = '2em';

插入节点

当获取到某个DOM节点并希望在其内部插入新的DOM节点时，应如何处理？若该DOM节点为空，例如<div></div>，可直接使用innerHTML = '<span>child</span>'来修改DOM节点内容，这相当于“插入”了新的DOM节点。若该DOM节点非空，则不能采用此方法，因为innerHTML会直接替换掉原有的所有子节点。此时有两种插入新节点的方法。其一为使用appendChild，将子节点添加到父节点的最后一个子节点位置。例如：


<!-- HTML结构 -->
<p id="js">JavaScript</p>
<div id="list">
  <p id="java">Java</p>
  <p id="python">Python</p>
  <p id="scheme">Scheme</p>
</div>

将<p id="js">JavaScript</p>节点添加到<div id="list">的最后一项：


var
  js = document.getElementById('js'),
  list = document.getElementById('list');
list.appendChild(js);

此时，HTML结构变为如下形式：


<!-- HTML结构 -->
<div id="list">
  <p id="java">Java</p>
  <p id="python">Python</p>
  <p id="scheme">Scheme</p>
  <p id="js">JavaScript</p>
</div>

由于插入的js节点已存在于当前文档树中，因此该节点会先从原位置删除，再插入到新位置。更多情况下，我们会从零创建一个新的节点，然后将其插入到指定位置：


var
  list = document.getElementById('list'),
  haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);

这样便动态添加了一个新节点：


<!-- HTML结构 -->
<div id="list">
  <p id="java">Java</p>
  <p id="python">Python</p>
  <p id="scheme">Scheme</p>
  <p id="haskell">Haskell</p>
</div>

动态创建节点并添加到DOM树中可实现多种功能。例如，以下代码动态创建了一个<style>节点，并将其添加到<head>节点的末尾，从而为文档动态添加新的CSS定义：


var d = document.createElement('style');
d.setAttribute('type', 'text/css');
d.innerHTML = 'p { color: red }';
document.getElementsByTagName('head')[0].appendChild(d);

可在Chrome浏览器控制台中执行上述代码，以观察页面样式的变化。

insertBefore方法

若需将子节点插入到指定位置，可使用parentElement.insertBefore(newElement, referenceElement)，子节点将插入到referenceElement之前。仍以上述HTML为例，假设需将Haskell节点插入到Python节点之前：


<!-- HTML结构 -->
<div id="list">
  <p id="java">Java</p>
  <p id="python">Python</p>
  <p id="scheme">Scheme</p>
</div>

代码实现如下：


var
  list = document.getElementById('list'),
  ref = document.getElementById('python'),
  haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.insertBefore(haskell, ref);

新的HTML结构如下所示：


<!-- HTML结构 -->
<div id="list">
  <p id="java">Java</p>
  <p id="haskell">Haskell</p>
  <p id="python">Python</p>
  <p id="scheme">Scheme</p>
</div>

可见，使用insertBefore的关键在于获取一个“参考子节点”的引用。很多时候，需要循环遍历父节点的所有子节点，可通过迭代children属性来实现：


var
  i, c,
  list = document.getElementById('list');
for (i = 0; i < list.children.length; i++) {
  c = list.children[i]; // 拿到第i个子节点
}

删除节点

删除DOM节点比插入操作更为简便。要删除一个节点，首先需获取该节点本身及其父节点，然后调用父节点的removeChild方法将自身删除：


// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);
removed === self; // true

需注意，删除后的节点虽不在文档树中，但仍存在于内存中，可随时再次被添加到其他位置。当遍历父节点的子节点并进行删除操作时，需特别注意，children属性是只读的，且会在子节点变化时实时更新。

例如，对于如下HTML结构：


<div id="parent">
  <p>First</p>
  <p>Second</p>
</div>

当我们使用以下代码删除子节点时：


var parent = document.getElementById('parent');
parent.removeChild(parent.children[0]);
parent.removeChild(parent.children[1]); // <-- 浏览器报错

浏览器报错：parent.children[1]不是一个有效的节点。原因在于，当<p>First</p>节点被删除后，parent.children的节点数量已从2变为1，索引[1]已不存在。

因此，在删除多个节点时，必须注意children属性时刻都在发生变化。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。

作者最新文章

网页开发三者分工：HTML结构、CSS样式与JavaScript交互怎么协作

2026-11-05 12:51:22

JS解析URL参数时怎么处理中文乱码和特殊字符

2026-11-05 12:47:23

js-cookie 存储 JSON 对象：自动序列化与反序列化技巧

2026-11-05 12:36:26

marked.js 快速上手：安装与基础 Markdown 转 HTML 示例

2026-11-05 09:32:53

Phaser.js 与 PixiJS、Cocos Creator 的技术选型对比

2026-11-05 08:36:30