必须手动转义HTML特殊字符：&、<、>、"、'，顺序为先&后其余；动态插入优先用textContent自动转义，避免innerHTML引发解析错误或XSS风险。
code 标签里显示 却被解析成标签
直接往 <code> 里写 <div>，浏览器会把它当真实标签解析，导致 DOM 错乱或内容截断。这不是 <code>code 标签的问题，而是 HTML 解析器在遇到未转义的 和 <code>> 时，会立即尝试构造标签结构。
必须手动转义这五个字符：&、、<code>>、"、'，顺序不能错：先转 &，再转其余。否则 < 可能被二次解析成 。
- 错误写法：
<code><div class="btn"></div></code>（没转义&，<会被当成实体开头） - 正确写法：
<code><div class="btn"></div></code> - 用 JS 动态插入时，优先走
textContent路线，它自动处理全部转义，且保留换行和空格
用 JavaScript 插入 HTML 源码到 code 标签
别拼字符串塞 innerHTML，尤其当源码来自用户输入或 API。最稳的方式是靠 textContent 自动转义：
const raw = '<div id="app">Hello & world</div>';<br>const el = document.querySelector('code');<br>el.textContent = raw;
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
这样既安全又省心——textContent 不触发解析，也不需要你手动调 html.escape() 或正则替换。如果非要用 innerHTML（比如想高亮），得先确保原始字符串已转义，且不带 <script> 等危险内容。
- 不要：
el.innerHTML = raw.replace(/&/g, '&').replace(/, '<')...（易漏、顺序错、引号处理不全） - 不要：
el.innerHTML = new DOMParser().parseFromString(raw, 'text/html').body.textContent（过度设计，且不处理&前置问题） - 要：
const temp = document.createElement('div'); temp.textContent = raw; el.textContent = temp.innerHTML;（DOM 标准转义，兼容所有环境）
搭配 pre 标签时换行和空格丢失
pre 本该保留格式，但如果你把转义后的内容直接塞进 pre 的 innerHTML，浏览器仍会压缩连续空格、折叠换行——因为 pre 只对“文本节点”生效，而 innerHTML 插入的是已解析的 DOM。
解决办法只有一个：让内容以纯文本方式进入 pre 子节点，而不是 HTML 字符串。
- 推荐：
const pre = document.querySelector('pre');<br>pre.textContent = rawHtml;（自动保留缩进、换行、空格） - 若必须用
innerHTML（如配合 highlight.js），先用document.createTextNode(rawHtml).textContent获取已转义字符串，再传给高亮库 - CSS 补救（仅限简单场景）：
pre { white-space: pre-wrap; }，但它不能修复因未转义导致的 DOM 截断
服务端已转义，前端还该不该处理
该，而且要看插入方式。服务端用 Python 的 html.escape() 或 PHP 的 htmlspecialchars() 输出的字符串，是给 HTML 模板直出用的；一旦以 JSON 形式传到前端，它就退化为普通字符串，后续如何插入 DOM 才决定是否需额外处理。
- 前端用
el.textContent = data.code→ 完全不用再转，浏览器不解析，原样显示 - 前端用
el.innerHTML = data.code→ 若data.code是服务端已转义的结果（如<div>），直接插入会显示字面量，此时得先 <code>html.unescape()还原，再清洗（如用 DOMPurify） - 框架场景：React 中
{data.code}等价于textContent；要用dangerouslySetInnerHTML，就必须确认字符串是可信且已清洗过的 HTML，不是原始用户输入
容易被忽略的一点：很多开发者以为只要用了
code 标签就“天然安全”，其实它只提供语义和默认样式，不提供任何转义能力。真正起作用的是你怎么把字符串放进去——textContent 是最简单可靠的入口，其他路径都绕不开对那五个字符的处理逻辑。
