动态生成的 被浏览器“吃掉”是因 HTML 解析器在 JS 执行前已按规范自动闭合非法嵌套，如 ... 中 触发 强制闭合；解决需插入前用正则或 DOMParser 清洗。
为什么动态生成的 <p></p> 常被浏览器“吃掉”
不是 JS 没执行，也不是模板没渲染，而是浏览器在解析 HTML 字符串时，根本没等你 JS 运行，就已经按规范重写了 DOM。只要字符串里出现 <p></p>
<div>...</div>
<p></p>
<p>...</p>，解析器一见到 <div> 或内层 <code><p></p>，立刻强制闭合外层 <p></p>，把后续内容“踢”到外面——真实 DOM 和你拼的字符串完全不一致。
innerHTML 赋值前必须过滤非法嵌套
动态插入 HTML 字符串时，innerHTML 不做语义校验，直接交给解析器。常见踩坑点：
立即学习“前端免费学习笔记（深入）”；
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 后端返回富文本（如 CMS、编辑器导出）含
<p><section>...</section></p>，直接插入会失效 - JS 拼接字符串时手误写成
`<p>${item}</p>`，而item本身含块级标签 - 用
document.createElement('p').innerHTML = htmlStr试图“预解析”，但结果一样被修正
解决办法：插入前用正则或 DOMParser 清洗。简单场景可用：
function sanitizePContent(html) {
return html.replace(/<p>([\s\S]*?)<\/p>/gi, (m, content) => {
// 把 p 内部的块级标签提到外面，用 div 包裹
return `<div class="p-content">${content.replace(/<(div|section|article|h[1-6]|ul|ol|table)/gi, '</div><$1')}</div>`;
});
}
用 insertAdjacentHTML 替代 innerHTML 时更危险
insertAdjacentHTML 看似可控，但底层仍是 HTML 解析，同样触发容错修正。尤其当插入位置是 'beforeend' 到一个 <p></p> 内部时，行为和 innerHTML 完全一致。
- 错误写法：
pEl.insertAdjacentHTML('beforeend', '<div>xxx</div>') - 正确替代：改用
appendChild+document.createElement，绕过 HTML 解析阶段 - 若必须用字符串，先确保目标容器不是
<p></p>—— 改用<div> 或 <code><article></article>作为动态内容挂载点服务端或构建时预处理比客户端补救更可靠
客户端清洗总有漏网之鱼，尤其 SSR/SSG 场景下，DOM 差异会导致 hydration 失败。更稳的做法是：
- 后端输出富文本前，用库（如 Python 的
bleach、Node 的sanitize-html）移除或转换非法嵌套 - 前端构建阶段用
html-validate扫描模板文件，CI 中拦截含<p></p> <div> 的提交 <li>富文本编辑器（如 TinyMCE、Quill）配置输出格式，禁用在段落内插入块级结构</li> <p>最常被忽略的一点：即使你用了 <code>display: block强行让<a></a>包住<div>，<code><p></p>内嵌块级元素仍是非法的——浏览器在解析 HTML 字符串阶段就已完成修正，CSS 和 JS 都是在那之后才起作用的。
- 后端输出富文本前，用库（如 Python 的
