HTML动态内容渲染需严格遵循获取→解析→插入三步链：fetch后须调response.json()等方法解析响应体，非JSON需选对应解析方式，跨域需设credentials；innerHTML拼接易致XSS与结构问题。
HTML动态内容渲染不是“把数据塞进页面”就完事，而是有明确先后依赖的三步链：获取 → 解析 → 插入。跳过任一环，或顺序错乱，就会出现空白、报错、脚本不执行、样式丢失等问题。
fetch + JSON.parse 是最常卡住的第一步
很多人写 fetch 后直接用 .then(data => ...)，忘了 response 不是数据本身，而是响应对象。没调 response.json() 就尝试遍历 data，结果得到 undefined 或 Promise 对象，后续全崩。
- 必须显式调用
response.json()（或response.text()、response.blob()）才能拿到可操作的数据 - 如果后端返回非 JSON（比如纯 HTML 片段），用
response.json()会抛SyntaxError -
fetch默认不带凭据（如 cookies），跨域请求需加{ credentials: 'include' }，否则可能静默失败
innerHTML 直接拼接字符串 = XSS 风险 + 结构脆弱
用 element.innerHTML = '<div>' + data.name + '</div>' 看似快，但一旦 data.name 含 <script></script> 或 onerror=，就执行恶意代码；更糟的是，若字符串含未转义的 &、，整个结构会错乱甚至被浏览器截断。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 永远不要用字符串拼接插入用户数据，除非你已用
DOMPurify.sanitize()或类似方案过滤 - 服务端返回的 HTML 若未经校验，
innerHTML会执行其中的<script></script>，且绑定的事件监听器不会自动激活 - 比拼接更稳的方式是：用
document.createElement()+textContent填纯文本，用insertAdjacentHTML()（仅限可信源）填结构
template 标签不 cloneNode(true) 就插入 = 内容消失且不可复用
<template id="item"><li class="name"></template> 这种写法本身不报错，但若直接 el.appendChild(document.querySelector('template').content)，第一次成功，第二次 content 就是空的——因为 content 是单次引用，移走即清空。
立即学习“前端免费学习笔记（深入）”；
- 每次使用都必须调
tmpl.content.cloneNode(true)，生成全新节点树 -
cloneNode(true)后才能安全调querySelector、addEventListener、textContent - IE11 及更早版本完全忽略
<template></template>，其子节点会作为普通 DOM 渲染到页面顶部，需用document.createElement('template')检测降级
真正难的不是写对某一行代码，而是在 fetch 返回后、DOM 更新前，准确判断当前数据是否已解析为对象、模板是否已克隆、事件是否需重新绑定——这些状态稍一混淆，渲染就变成“看起来动了，其实没生效”。
