应使用 innerHTML 而非 textContent 或 innerText 写入 HTML 字符串，Vue 用 v-html、React 用 dangerouslySetInnerHTML，并确保元素已挂载、标签合法、CSP 允许。
HTML 标签不渲染，浏览器直接显示 <strong> 文本怎么办
这是最典型的“标签没生效”错觉：你写的 <strong> 在页面上原样显示成文字，不是加粗效果。根本原因只有一个——浏览器没把它当 HTML 解析，而是当纯文本渲染了。
常见于以下场景：
- 把 HTML 字符串赋值给了元素的
textContent（而非innerHTML） - 用 JS 拼接字符串后，通过
document.write()或element.innerText = htmlStr写入 - 框架里误用了非 HTML 插值语法（比如 Vue 的
{{ }}默认转义，React 的{}不自动解析字符串）
验证方法很简单：右键页面 → “查看网页源代码”，如果源码里确实有 <strong>，但开发者工具里 Elements 面板没展开成节点，说明是写入方式错了。
innerHTML 用了还是不生效？检查这三件事
innerHTML 是最常用解法，但它不是万能钥匙，三个关键点卡住就白写：
立即学习“前端免费学习笔记（深入）”；
- 目标元素必须已挂载到 DOM 中，不能对
document.createElement('div')这种未插入的元素设innerHTML后再期待它立刻生效（它确实生效了，但你看不见） - 字符串里不能含非法嵌套或未闭合标签，比如
'<div><p>hello</div>'—— 浏览器会自动容错修正，可能删掉<p>或截断内容 - 某些环境（如 CSP 策略严格的内容安全策略）会拦截内联 HTML 注入，控制台报错
Refused to set innerHTML
示例对比：
const el = document.getElementById('box');
el.innerHTML = '<strong>加粗文字</strong>'; // ✅ 正常
el.textContent = '<strong>加粗文字</strong>'; // ❌ 显示字面量
Vue/React 里写 <span> 却不渲染？别硬塞 HTML 字符串
框架层做了默认防护，直接插 HTML 字符串大概率被转义或忽略，不是 bug，是设计。
- Vue：用
v-html指令，<div v-html="rawHtml"></div>；但注意rawHtml必须来自可信源，XSS 风险自担 - React：用
dangerouslySetInnerHTML属性，<div dangerouslySetInnerHTML={{ __html: rawHtml }} />；名字已经警告你了 - 更安全的做法：拆成组件，比如把
<em>抽成<EmText>组件，用 props 控制样式逻辑
错误示范：<div>{{ '<em>斜体</em>' }}</div> → 页面显示的就是那串字符。
控制台没报错，但标签样式就是不应用
这时候问题往往不在 HTML 解析，而在 CSS 层或 DOM 状态：
- 检查元素是否被
display: none、visibility: hidden或父级overflow: hidden遮挡 - 确认样式规则没被更高优先级的 CSS 覆盖（打开开发者工具 Elements 面板，看 Styles 标签页里对应属性是否划掉）
-
<script>标签位置太靠前，DOM 还没加载完就执行操作，导致目标元素查不到，后续所有设置都无效
一个快速验证法：在控制台手动输入 document.querySelector('strong')，如果返回 null，说明标签压根没生成成功，别急着调样式。
真正麻烦的从来不是标签写错，而是你以为它被解析了，其实它连 DOM 树都没进过。多看一眼 Elements 面板里的实际结构，比反复改 CSS 有用得多。
