JavaScript 动态添加与删除 DOM 元素的完整指南
本文详细解析了 JavaScript 中动态操作 HTML DOM 元素的核心方法。通过创建元素节点、文本节点并追加到父容器，实现新内容的插入；同时演示了如何定位子元素并利用 parentNode 属性安全移除现有节点。包含完整代码示例与在线测试工具链接，帮助开发者掌握前端页面动态交互技巧。
本文通过具体实例，深入讲解在 JavaScript 中添加或删除 HTML DOM 元素的操作方法，供读者参考学习。
动态添加 HTML 元素
创建新的 HTML 元素
若要在 HTML DOM 中插入新元素，需分两步进行：首先创建该元素节点，随后将其追加至一个已存在的父元素中。
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
以下代码展示了如何创建一个新的<p> 元素：
var para=document.createElement("p");
若需向 <p> 元素内部添加文本内容，必须先创建对应的文本节点。以下代码演示了文本节点的创建过程：
var node=document.createTextNode("这是一个新段落。");
接下来，需将该文本节点追加到 <p> 元素内部：
para.appendChild(node);
最后一步，是将包含文本的新元素追加到页面中已有的某个父元素上。
以下代码用于定位页面中已存在的特定元素：
var element=document.getElementById("div1");
执行以下代码，即可在已定位的父元素末尾添加新创建的元素：
element.appendChild(para);
动态删除 HTML 元素
删除已有的 HTML 元素
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
理想情况下，若能直接删除元素而无需引用其父元素会更方便。然而，DOM 规范要求必须明确指定待删除的元素及其所属的父节点。
常用的解决方案是：先定位希望删除的子元素，随后通过其 parentNode 属性获取父元素引用：
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
怎么在 Vue 或 React 项目中正确集成 animate.js
2026-11-05 10:23:38
JS注册事件：addEventListener基础语法与参数详解
2026-11-05 08:44:56
JSP和JS的区别：运行环境与服务端/客户端职责解析
2026-11-04 23:34:36
pdf.js 官方下载地址：GitHub Release 获取预编译包
2026-11-04 23:07:27
前端学习路径：为什么建议先掌握HTML再学习JavaScript？
2026-11-04 18:56:08