网页之所以能实时响应用户的操作，比如点击按钮后文字变化、提交表单后页面局部刷新，靠的就是JavaScript对HTML内容的动态修改。浏览器加载页面时会把HTML解析成一棵DOM树，每个标签都变成树上的一个节点对象，JavaScript拿到这些对象后就可以随意读写它们的内容、属性和结构。本文就来系统讲讲html如何修改内容，把常用的DOM操作方法一次性梳理清楚。
一、先理解DOM：修改内容的本质是操作节点对象
很多人一开始会以为JavaScript是在直接改写HTML源码文件，其实不是。浏览器解析完HTML后，内存中会生成一棵由各种节点组成的树形结构，也就是文档对象模型（Document Object Model）。你在页面上看到的每一个标签，在内存里都对应一个对象，改这个对象的属性，页面显示就会立刻跟着变化。
所以在修改内容之前，第一步永远是"选中节点"。最常用的选择方法有这么几种：
// 通过 id 获取，返回单个元素
var box = document.getElementById("box");
// 通过 CSS 选择器获取，推荐日常使用
var title = document.querySelector(".title"); // 第一个匹配的
var items = document.querySelectorAll("li"); // 所有匹配的，返回 NodeList
// 通过标签名、类名获取
var ps = document.getElementsByTagName("p");
var tips = document.getElementsByClassName("tip");拿到节点之后，才轮到修改操作登场。选择器用错了，后面的代码写得再漂亮也不会生效，这是新手最常踩的坑之一。另外要注意querySelector返回的是静态集合，而getElementsByClassName返回的是动态集合，后续增删元素时两者的表现不一样，这点在遍历删除节点时要格外小心。
二、修改文本与HTML片段：innerHTML、textContent和innerText怎么选
改文本内容有三个常用属性，很多人分不清区别。innerHTML会把字符串当作HTML解析，适合插入带标签的片段；textContent会原样输出字符串，不解析标签，性能更好也更安全；innerText则贴近用户看到的渲染结果，会受CSS影响（比如隐藏的元素取不到文本）。
var box = document.getElementById("box");
// innerHTML：字符串中的标签会被解析成真实元素
box.innerHTML = "<strong>加粗的文字</strong>";
// textContent：标签原样显示，不会被解析
box.textContent = "<strong>这不是加粗，就是纯文本</strong>";
// 读取时的区别
console.log(box.innerHTML); // 可能包含标签
console.log(box.textContent); // 只有纯文字这里必须重点提一下安全问题。如果被插入的字符串来自用户输入，比如评论、留言、搜索框的值，用innerHTML直接拼接就存在XSS跨站脚本攻击的风险，恶意用户可以注入一段&lt;script&gt;代码或者伪造页面元素。所以有一条经验法则：只插入纯文本时坚决用textContent，只有内容完全可控或者经过转义处理时才用innerHTML。
性能方面也有差别。innerHTML涉及HTML解析器的解析过程，大批量更新时开销明显；而textContent只是设置文本，速度快得多。因此在循环里频繁更新大量文本时，优先考虑textContent。
三、增删改元素节点：createElement、appendChild与remove
如果要修改的不只是文本，而是页面结构本身，就需要用到节点的创建、插入和删除。核心API包括createElement创建元素、appendChild追加到末尾、insertBefore插入到指定位置、removeChild或者remove删除节点。
// 动态创建一个列表项并追加到列表末尾
var list = document.getElementById("list");
var li = document.createElement("li");
li.textContent = "新增加的条目";
list.appendChild(li);
// 在第一个子元素前面插入
var first = list.firstElementChild;
var li2 = document.createElement("li");
li2.textContent = "插到最前面";
list.insertBefore(li2, first);
// 删除某个节点（两种写法）
list.removeChild(li); // 父节点调用的传统写法
first.remove(); // 新API，自己删自己，更简洁
// 替换节点
var li3 = document.createElement("li");
li3.textContent = "替换上来的";
list.replaceChild(li3, list.children[0]);一个常见的性能优化技巧是减少重排次数。如果一次性要插入几十上百个节点，逐个appendChild会让浏览器反复计算布局，页面明显卡顿。更好的做法是先用DocumentFragment把节点组装好，再一次性挂到DOM树上，或者干脆拼好HTML字符串后用一次innerHTML写入，这样浏览器只需要重新布局一次。
// 优化前：循环中频繁操作DOM，性能差
for (var i = 0; i < 100; i++) {
var li = document.createElement("li");
li.textContent = "第" + i + "条";
list.appendChild(li);
}
// 优化后：先攒齐，再一次插入
var frag = document.createDocumentFragment();
for (var i = 0; i < 100; i++) {
var li = document.createElement("li");
li.textContent = "第" + i + "条";
frag.appendChild(li);
}
list.appendChild(frag);四、修改属性与事件驱动：让内容跟着用户操作变化
除了内容本身，标签的属性也经常需要动态修改，比如换图片的src、改链接的href、切换按钮的disabled状态。这一步用setAttribute或者直接点语法都可以：
var img = document.querySelector("img");
img.setAttribute("src", "new-pic.jpg");
img.alt = "新图片描述"; // 点语法更简洁，两种方式等价
var link = document.querySelector("a");
link.href = "https://www.bbccb.com";
var btn = document.getElementById("submitBtn");
btn.disabled = true; // 禁用按钮实际业务中，内容的修改通常由事件触发，也就是"用户做了什么，页面就跟着改什么"。最典型的就是点击按钮更新文字、输入框内容实时同步到页面。下面给一个可以直接运行的完整例子，把选择节点、修改内容、事件监听串起来：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态修改内容示例</title>
</head>
<body>
<h2 id="title">原始标题</h2>
<p id="msg">点击按钮试试看</p>
<input type="text" id="nameInput" placeholder="输入名字">
<button id="changeBtn">修改内容</button>
<script>
var btn = document.getElementById("changeBtn");
var title = document.getElementById("title");
var msg = document.getElementById("msg");
var input = document.getElementById("nameInput");
// 点击按钮时修改标题和段落内容
btn.addEventListener("click", function () {
var name = input.value.trim();
title.textContent = "你好，" + (name || "访客");
msg.innerHTML = "内容已在 <em>" + new Date().toLocaleTimeString() + "</em> 更新";
this.disabled = true; // 防止重复点击
});
// 输入时实时同步
input.addEventListener("input", function () {
msg.textContent = "你正在输入：" + this.value;
});
</script>
</body>
</html>把这个文件保存后用浏览器打开，输入名字再点按钮，就能看到标题和段落被实时替换。操作表单控件时有一点要注意：输入框、下拉框的当前值要用value属性读取和设置，而不是textContent，因为它们的显示值存储在value特性里。勾选框则要用checked属性判断状态。
最后总结一下思路：改纯文本用textContent，改HTML片段用innerHTML（注意内容来源可信），改结构用创建加插入的节点API，改属性用setAttribute或点语法，再配合事件监听实现交互。掌握这几组方法，页面上绝大多数内容动态修改的需求都能轻松搞定。当然如果项目里用了Vue、React这类框架，框架会帮你接管DOM更新，但理解这些底层操作依然是排查问题的基础功。
HTML修改内容DOM操作JavaScript动态修改修改时间：2026-09-16 06:57:38