最可靠方案是递归创建元素+DocumentFragment批量插入+template结构隔离；避免innerHTML拼接，用createElement精确构建DOM，cloneNode(true)处理template内容，表格树形结构需用data属性标记关系并动态设置缩进。
直接用 innerHTML 拼接嵌套 HTML 字符串是最常见也最容易出错的做法——它会破坏 DOM 结构、丢失事件绑定、引发 XSS 风险，且无法处理深层递归或动态更新。真正可靠的方案是：用原生 JS 递归生成元素 + DocumentFragment 批量插入 + template 做结构隔离。
用 document.createElement 递归生成节点，别拼字符串
拼接 innerHTML = '<div>...<div>...' 看似快，但遇到空格、换行、未闭合标签时浏览器会自动修正 DOM，导致层级错乱（比如子节点被塞到父节点外层）。递归创建元素能保证结构精确：<ul>
<li>每层调用 <code>document.createElement('div')，再用 appendChild() 显式挂载子节点
children 数组的加 data-branch="true"，方便后续控制展开/折叠DocumentFragment 收集所有新节点，最后一次性 appendChild
template 是唯一安全的结构化容器
template 的 content 是只读 DocumentFragment，直接 appendChild(template.content) 会导致内容被“搬走”，第二次调用就为空——这是静默失败，控制台不报错，极难排查。
- 必须用
template.content.cloneNode(true)获取可操作副本 -
template内的<script></script>和<style></style>默认不执行、不解析，动态行为要手动绑定：instance.querySelector('button').addEventListener(...) - ID 冲突必须主动处理：克隆后若存在重复
id="node-1"，document.getElementById只取第一个，建议改用data-id
表格里渲染树形结构，tr 不能靠 display: none 控制显隐
HTML 表格语义严格，tr 不支持 height 过渡，也不能用 transform 缩进（会破坏单元格对齐和屏幕阅读器识别）。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 子行必须用
data-parent-id和data-level标记关系，不用 class 硬编码层级 - 缩进统一用
td { padding-left: calc(var(--level, 0) * 24px); }，JS 设置style="--level: 2" - 展开/折叠操作必须每次重新
querySelectorAll('tr[data-parent-id="row-102"]')，不能缓存结果集——DOM 是活的，新插入的行不会自动纳入旧查询结果 - 子行的
<td> 数量必须和表头一致，否则浏览器会补全错位，导致列错行<p>最常被忽略的是 hydration 边界：如果服务端已输出部分结构（如 SSR 页面），又用 <code>template补充内容，data-state、表单焦点、aria-expanded这些状态不会自动同步，得靠 JS 显式接管或重置。
