template.content只能用一次，因其返回只读DocumentFragment，行为类似“剪切”，首次appendChild后即被移走，再次调用静默失败；必须用cloneNode(true)或importNode克隆才能安全复用。
template 标签本身不提供动态更新能力，它只负责声明惰性 DOM 片段；真正实现组件级动态更新，靠的是你用 JavaScript 控制克隆、修改、插入和替换的节奏——不是模板自动响应数据变化，而是你主动触发。
为什么不能直接 appendChild(template.content)？
因为 template.content 是一个 DocumentFragment，它被插入一次后就“空了”，再 append 就什么也没有。控制台不会报错，但第二次渲染永远为空，极难定位。
- 必须用
cloneNode(true)或document.importNode(template.content, true)获取可复用副本 - 如果模板里有
id（比如<button id="close-btn">），克隆后会重复，document.getElementById只取第一个，交互逻辑可能失效 - 克隆后建议立即处理重复
id：重命名、移除或改用data-id
replaceChildren() 替代 innerHTML 的真实价值
用 innerHTML = newHtml 会销毁整个子树，所有已绑定事件监听器全部丢失；而 replaceChildren() 保留父节点，只替换子节点，原生事件绑定依然有效——前提是这些事件没绑在被替换的子节点上。
- 支持节点或字符串参数：
container.replaceChildren(clone)比innerHTML更语义清晰 - 不兼容 IE，但现代浏览器（Chrome 86+、Firefox 78+、Safari 14.1+）全支持
- 旧环境 fallback 写法：
container.replaceChildren ? container.replaceChildren(nodes) : container.innerHTML = htmlStr
表格（tbody）里插入模板内容的硬性规则
服务端返回的 HTML 字符串（如 <tr><td>xxx</td></tr>）不能直接塞进 tbody：浏览器会自动补全缺失的父容器（比如加一层 <tbody>），导致结构嵌套错乱，CSS 和 JS 都可能失灵。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：把字符串先塞进
<template>，再取content克隆插入 - 目标容器必须是
tbody，不是table；否则克隆后的tr会被包裹进默认tbody，破坏原有结构 - 若模板中含
<script>或<style>，它们默认不执行、不生效，别指望自动加载逻辑或样式
真正容易被忽略的点在于：模板只是“蓝图”，它不管理状态、不跟踪变更、不处理冲突。所谓“动态更新”，是你在每次数据变化时，重新走一遍「克隆 → 填值 → 处理 id/事件 → 插入」的完整链路；少一步，就可能在某个边缘场景下静默失败。
