DOM 操作文本节点：innerHTML、innerText、textContent 一文吃透！
|
admin
2026年3月7日 8:4
本文热度 19
|
你是不是在写前端代码时，经常被innerHTML、innerText、textContent这三个属性搞晕？ 同样是操作网页文本，为啥有的能解析HTML标签，有的只会纯文本展示？用错了还会出bug、有安全风险？
先搞懂核心：我们操作的是「文本节点」
在网页里，所有文字内容都属于文本节点，就是HTML标签包裹的内容：
<!-- "前端小课堂" 就是文本节点 -->
<div>前端小课堂</div>
<!-- "百度一下" 就是文本节点 -->
<a href="#">百度一下</a>
JS想要修改、读取这些文字，就靠今天的三个主角，还有两个冷门配角，我们一次性讲清楚！
一、三大核心属性详解 案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本节点操作详解</title>
<style>
.box { border: 1px solid #ccc; padding: 10px; margin: 10px 0; }
</style>
</head>
<body>
<h3>原始内容</h3>
<div class="box" id="demo">
我是原始文本
<span style="color:red">
我是红色span标签
</span>
</div>
<button onclick="testInnerHTML()">测试innerHTML</button>
<button onclick="testInnerText()">测试innerText</button>
<button onclick="testTextContent()">测试textContent</button>
<script>
// 获取元素
const box = document.getElementById('demo');
// 1. 测试 innerHTML：【能解析HTML标签】
function testInnerHTML() {
// 读取：会返回 【文本 + 完整HTML结构】
console.log('innerHTML读取：', box.innerHTML);
// 设置：会把字符串当HTML解析，生成标签
box.innerHTML = '<h2 style="color:blue">我是innerHTML设置的蓝色标题</h2>';
}
// 2. 测试 innerText：【纯文本，只显示"人能看见"的内容】
function testInnerText() {
// 读取：只返回页面渲染的纯文本，忽略HTML标签
console.log('innerText读取：', box.innerText);
// 设置：HTML标签会被当作文本直接显示，不会解析
box.innerText = '<h2>我是innerText，标签不会生效</h2>';
}
// 3. 测试 textContent：【标准纯文本，获取所有文本内容】
function testTextContent() {
// 读取：获取元素内所有文本（包括隐藏文字），无HTML
console.log('textContent读取：', box.textContent);
// 设置：和innerText一样，纯文本展示，不解析标签
box.textContent = '<h2>我是textContent，标准纯文本</h2>';
}
</script>
</body>
</html>
1. innerHTML —— 最常用的「HTML解析神器」
核心特点：
- 设置：自动解析HTML标签，直接渲染成DOM元素。
- 优势：代码简洁，渲染复杂结构比手动创建节点快10倍。
- 缺点：有XSS安全风险（不要直接渲染用户输入的内容）。
一句话总结：想插入带样式、带标签的内容，用它！
2. innerText —— 「只认人眼可见的纯文本」
核心特点：
一句话总结：只想插入纯文字，不想让标签生效，用它！
3. textContent —— 「标准通用纯文本」
核心特点：
一句话总结：现代前端开发，纯文本操作优先用它！
二、一张表看懂三者核心区别
三、两个冷门属性：outerHTML / outerText
日常开发用得极少，但你必须知道区别：
- outerHTML：和innerHTML功能一样，但会替换自身标签
// 原本是div，执行后直接变成p标签
box.outerHTML = '<p>我替换了整个div</p>';
- outerText
小贴士：不到万不得已，不推荐使用，容易破坏DOM结构！
四、新手必看：3个实用避坑指南
- 安全问题：innerHTML千万别直接渲染用户输入的内容，容易引发XSS攻击。
- 性能问题：频繁修改innerHTML会重复渲染DOM，建议拼接完再一次性赋值。
- 标准问题：现代Vue/React/原生项目，纯文本优先用textContent。
总结
- 要插入HTML标签、渲染样式 → 用 innerHTML。
- 要纯文本、只显示可见内容、兼容IE → 用 innerText。
- 要标准纯文本、获取所有内容、现代开发 → 用 textContent。
这三个属性是前端操作DOM文本的基础，吃透它们，写网页文本修改逻辑再也不会晕啦~
阅读原文：原文链接
该文章在 2026/3/9 9:40:22 编辑过
400 186 1886
