构建嵌套dom时需确保父子关系准确，推荐用函数封装返回完整子树或documentfragment批量插入；混合内容需区分node与字符串处理；事件应委托至外层容器；须管理组件生命周期防内存泄漏。
用 document.createElement 逐层构建嵌套结构时，父子关系容易断链
直接链式调用 appendChild 看似清晰，但嵌套层级一深（比如 4 层以上），就极易漏掉某次 appendChild，导致子节点没挂到预期父节点上，最终渲染出错或内容丢失。
常见错误现象：Uncaught TypeError: Cannot read properties of null，或 DOM 中只出现顶层容器，内部全空。
- 每创建一个新元素，必须显式指定它的父节点，并确认该父节点已存在且未被重复使用
- 避免在循环中反复覆盖同一变量（如把
container当作“当前父节点”却未及时更新） - 推荐用函数封装，返回完整子树根节点，再统一挂载，而不是边建边插
模板字符串 + createElement 封装函数要处理文本与节点混合插入
单纯用 innerHTML 能快速生成嵌套 HTML，但会丢弃事件监听器、破坏已有状态；而纯 createElement 写法冗长。折中方案是写一个轻量解析函数（如叫 html），但它必须区分传入的是字符串还是真实 DOM 节点。
关键点在于：模板中插值（${...}）可能是字符串、Node、甚至 DocumentFragment，不能一概用 textContent 处理。
- 若插值是
instanceof Node，直接appendChild - 若插值是字符串，需用
createTextNode包裹，避免 XSS（不直接设innerHTML） - 相邻模板段之间可能有空白文本节点，需
.trim()判断是否跳过
深度嵌套组件必须考虑事件委托而非逐个绑定
当组件内动态生成几十个按钮、列表项时，为每个元素单独加 addEventListener 不仅性能差，还容易因后续增删节点导致监听器残留或失效。
正确做法是在最外层容器上监听事件，靠 event.target 匹配实际触发元素。
- 绑定时用事件类型如
'click'，捕获阶段通常不需要，冒泡足够 - 匹配目标可用
event.target.matches('button[data-action="delete"]') - 注意：如果组件用了
Shadow DOM，事件不会冒泡出来，得在 shadowRoot 上监听
DocumentFragment 批量插入能避免多次重排重绘
深度嵌套意味着大量节点创建和插入操作。如果每建一个子节点就 appendChild 到真实 DOM，浏览器会反复计算布局、重绘，尤其在低性能设备上卡顿明显。
DocumentFragment 是离线 DOM 片段，所有子节点先 append 到它里面，最后一次性插入真实 DOM，只触发一次 layout。
- 不要用
fragment.appendChild(node)后又对node做二次操作——它已脱离文档流 - 可配合工厂函数返回 fragment，方便组合多个组件片段再统一挂载
- 注意：
fragment插入后自动清空，不能复用
IntersectionObserver 实例？这些细节不处理，嵌套越深，内存泄漏风险越高。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
