必须用 JavaScript 操作 DOM 才能将富文本转为动态内容；推荐用 insertAdjacentHTML('beforeend', html) 安全追加，用户输入需先经 DOMPurify.sanitize() 过滤防 XSS，纯文本显示可用 textContent，外部加载可借 script 标签引入 JS 变量。
不能直接用 HTML 解析富文本为动态内容——必须靠 JavaScript 操作 DOM。 HTML 本身是静态标记语言，没有解析、执行或响应能力；所谓“解析富文本为动态内容”，本质是：把含标签的字符串（如 <p><strong>通知</strong>已发布</p>）安全地插入页面，并使其可交互、可更新、可绑定数据。
用 insertAdjacentHTML 追加富文本到指定容器内部
这是最常用且可控性最强的方式，比 innerHTML = ... 更精准，避免清空已有内容。
-
insertAdjacentHTML的第二个参数必须是合法 HTML 字符串，第一个参数决定插入位置：'beforeend'表示在目标元素内部末尾追加（推荐），'afterbegin'是开头，'afterEnd'会插到外部同级位置（容易破坏结构） - 错误写法：
element.insertAdjacentHTML('afterEnd', '<p>新段落</p>')→ 新段落脱离容器，CSS 样式和事件监听全部失效 - 正确写法：
document.getElementById('content').insertAdjacentHTML('beforeend', '<p class="alert"><em>系统维护中</em></p>') - 注意：该方法不校验或过滤脚本，若富文本来自用户输入，必须先用
DOMPurify.sanitize()处理，否则存在XSS风险
用 textContent 替代 innerHTML 防止 XSS，但放弃 HTML 渲染
如果你只关心“显示文字”，且富文本里混有未转义的 <script></script> 或 <img onerror="..." alt="HTML怎么把富文本数据解析为动态内容" >，直接赋值 innerHTML 就等于开放执行入口。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
-
textContent把整个字符串当纯文本处理，所有标签都会原样显示，不解析、不执行、不渲染 - 适合场景：日志展示、调试输出、后台返回的原始 HTML 字符串预览
- 示例：
el.textContent = '<div onclick="alert(1)">点我</div>'→ 页面上真的显示 "点我" 这串字符 - 如果既要防 XSS 又要渲染 HTML，别手写转义逻辑，用
DOMPurify库：el.insertAdjacentHTML('beforeend', DOMPurify.sanitize(dirtyHtml))
从外部文件加载富文本并动态注入（无 fetch 环境下可行）
在嵌入式看板、静态部署或构建受限环境（如某些 CI/CD 流程禁用 fetch），可用 <script src="data.js"></script> 加载变量再写入。
- 外部文件
data.js内容必须是合法 JS 赋值语句：htmlContent = '<p><span style="color:green">✅ 正常</span></p>';（不要用const/let，避免作用域问题） - HTML 中顺序不能错：
<p id="target"></p>必须在<script src="data.js"></script>和执行脚本之前声明 - 执行时检查变量是否存在：
if (typeof htmlContent !== 'undefined') { target.insertAdjacentHTML('beforeend', htmlContent); } - 该方式绕过 CORS，但无法做运行时参数替换（比如带用户 ID 的占位符），需提前在服务端拼好
真正难的不是“怎么插进去”，而是“插进去之后还能不能动”。富文本一旦用 insertAdjacentHTML 插入，里面的按钮、链接、表单就恢复了交互能力，但如果你后续想修改其中某一段文字、删掉某个 <img alt="HTML怎么把富文本数据解析为动态内容" >、或者给某个 <span data-id="123"></span> 绑定点击事件——这些都得靠 DOM 查询（querySelector）和事件委托来补全。别指望一次插入就万事大吉。
