JavaScript DOM操作：创建、删除元素与修改CSS样式详解
本文详解JavaScript中DOM操作的核心方法，包括如何动态创建新HTML元素并追加到文档中，如何定位并删除指定子元素，以及如何通过style属性直接修改元素的CSS样式。内容涵盖createElement、createTextNode、appendChild及removeChild等关键API的实际应用与代码示例，帮助开发者掌握前端页面动态交互的基础技术。
动态创建并添加HTML元素
JavaScript HTML DOM 提供了操作网页元素（即节点）的能力。若要向 HTML DOM 中添加新元素，需先创建该元素节点，随后将其追加至已存在的元素中。
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
以下代码演示如何创建一个新的 <p> 元素：
var para=document.createElement("p");若需向 <p> 元素内添加文本内容，必须先创建文本节点。代码如下：
var node=document.createTextNode("This is a new paragraph.");接着，需将该文本节点追加到 <p> 元素中：
para.appendChild(node);最后，需将包含文本的新元素追加至页面中已有的某个元素。首先定位目标父元素：
var element=document.getElementById("div1");随后执行追加操作，将新元素插入到已存在的元素之后：
element.appendChild(para);删除现有HTML元素
删除现有的 HTML 元素时，需先定位父元素及待删除的子元素。示例如下：
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
该 HTML 文档包含一个 <div> 元素，其内部有两个子节点（即两个 <p> 元素）：
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
通过 id 属性定位到 id="div1" 的元素：
var parent=document.getElementById("div1");通过 id 属性定位到 id="p1" 的 <p> 元素：
var child=document.getElementById("p1");利用父元素的 removeChild 方法删除子元素：
parent.removeChild(child);虽然理想情况下希望直接删除元素而不引用父元素，但 DOM 规范要求明确指定父元素。因此常用解决方案是：先获取待删除的子元素，再通过其 parentNode 属性找到父元素，最后执行删除操作：
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
通过DOM修改CSS样式
JavaScript HTML DOM 允许通过脚本修改 HTML 元素的 CSS 样式。修改样式的语法为：document.getElementById(id).style.property=new style。例如，改变 <p> 元素的样式代码如下：
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
<p>The paragraph above was changed by a script.</p>
</body>
</html>
本例演示当用户点击按钮时，改变 id="id1" 的 HTML 元素样式：
<!DOCTYPE html>
<html>
<body>
<h1 id="id1">My Heading 1</h1>
<button type="button"
onclick="document.getElementById('id1').style.color='red'">
Click Me!</button>
</body>
</html>
anime.js 快速入门：怎么引入库并编写第一个 DOM 动画
2026-11-05 14:22:43
在线JS解密后变量名仍乱码？结合浏览器DevTools调试还原
2026-11-04 20:26:01
怎么在浏览器中运行JavaScript代码并查看输出结果
2026-11-04 09:07:33
JS 获取屏幕分辨率：window.screen.width 与 height 用法
2026-11-04 08:52:48
为什么推荐用DOMContentLoaded代替window.onload初始化JS
2026-11-04 08:42:33