← 返回目录

4. innerText 与 innerHTML

innerHTML 拿/写标签结构，innerText 只拿/写纯文本。

核心区别：
① innerHTML——包含 HTML 标签，写入会解析
② innerText——纯文本，标签不解析
③ textContent——拿全部文本包括隐藏的

坑：innerHTML 写入用户输入有 XSS 风险、innerText 会触发重排、textContent 性能更好。

4.1 互动演示（看两把刷子的区别）

我是被改写的目标盒子
点按钮： 上面盒子内容变化， 下面同步代码与结论。

4.2 知识点逐条讲解

① innerText：只认字，不认标签

把它想成一台复印机：你给它带尖括号的东西，它也只会原原本本印成一行字，绝不会把 当真。

// 抓到目标盒子
let box = document.getElementById('targetBox');

// 给它一串带标签的字
// 照抄，尖括号只当普通字
box.innerText = '<b>加粗</b> 你好';

// 屏幕上就是原样显示：<b>加粗</b> 你好（字不会变粗）

② innerHTML：真的会认标签

把它想成一个排版员：你给它标签，它按标签排版——真的变粗、<h1>真的变大标题。

// 还是那个目标盒子
let box = document.getElementById('targetBox');

// 给同样的一串字
// 它真认标签，把 <b> 当真排版
box.innerHTML = '<b>加粗</b> 你好';

// 屏幕上"加粗"两个字真的变粗了！

如果你用 innerHTML 写一次新内容，盒子里原来的字就没了。因为它是"整块替换"不是"在后面追加"；想保留旧内容，得自己拼字符串或用 appendChild。

③ 为什么别人输入的内容要用 innerText（防 XSS）

想象有人故意输入这么一串"字"：一张故意加载失败的图片，图片一失败就自动跑一段偷偷的代码。如果你用 innerHTML，浏览器真会照办；用 innerText，它只会被当成一行普通文字，啥也跑不起来。

// 别信的"坏内容"长这样：一张 src 写错的图，失败就弹窗
<
img src = x onerror = "alert('坏代码跑了')" >

如果你把别人/后端给的内容直接塞进 innerHTML，就可能让坏人偷偷在你页面跑代码（XSS）；因为 innerHTML 会把标签当真去执行，而 innerText 只会当成普通字。所以：展示别人给的内容一律用 innerText，只有自己写死、确定安全的标签才用 innerHTML。

实战：用在哪 / 常见坑 / 怎么解决

① 用在哪：评论区/聊天列表展示用户内容；自己写死结构时动态插入标签。

② 常见坑：把用户输入用 innerHTML 渲染导致 XSS；或忘了 innerHTML 是整块覆盖。

③ 怎么解决：展示别人内容一律 innerText；自己造结构才用 innerHTML，注意它会覆盖原内容。

一句话记住：innerText 安全只显字，innerHTML 真排版；自己造标签用 innerHTML，显示别人输入用 innerText，别把别人内容丢进 innerHTML。

本页重点

API作用参数返回值代码示例
元素.innerText照抄纯文本,不认标签字符串纯文字box.innerText = '你好';
元素.innerHTML真解析标签排版HTML 字符串渲染后的内容box.innerHTML = '<b>你好</b>';
innerHTML 塞坏内容会被执行(XSS)不可信字符串有安全风险box.innerHTML = '<img src=x onerror=alert(1)>';