直接 innerHTML += '...' 会销毁原有节点、抹除事件监听器、引发 XSS 风险并导致频繁重排；应使用 template.content.cloneNode(true) 克隆后经 DocumentFragment 批量插入，并通过事件委托管理交互。
为什么直接 innerHTML += '...' 会出问题
这不是模板，是字符串拼接。它绕过浏览器的解析流程，跳过 HTML 验证、样式计算和事件绑定时机，还会把已绑定的事件监听器一并抹掉。更危险的是，如果插入内容来自用户输入，innerHTML 几乎等于主动打开 XSS 入口。
- 每次赋值都会触发完整 DOM 重排，性能差
-
innerHTML +=实际是“读取旧内容 → 拼接新字符串 → 全量替换”，原有节点全部销毁 - 无法复用已有节点引用，比如你之前
document.getElementById('btn')得到的对象，下次就失效了
template.content.cloneNode(true) 是最安全的起点
原生 <template> 标签的内容在解析时被挂起，不执行脚本、不加载图片、不触发 CSS 计算。只有调用 cloneNode(true) 才真正生成一份可操作的 DOM 片段——这是现代前端模板机制的基石。
- 必须用
.content属性访问内部 DOM，直接template.innerHTML只返回字符串，丢失结构信息 -
cloneNode(true)复制的是深度克隆，包含所有子节点和属性；false只克隆第一层，通常不够用 - 克隆后记得更新 ID 或
name属性，否则多个实例会因重复 ID 导致getElementById行为不可预测
批量渲染时别忘了 DocumentFragment
如果你要一次插入 50 个卡片，逐个 appendChild() 到容器里，浏览器会做 50 次布局计算。用 DocumentFragment 把它们先攒起来，再一次性插入，能砍掉 90% 以上的重排开销。
- 创建方式：
const frag = document.createDocumentFragment() - 把每个克隆后的
template.content追加进frag，而不是直接塞进真实 DOM - 最后只调一次
container.appendChild(frag)，DOM 更新就完成了 - 注意：
frag本身不能被查询或添加事件监听器，它只是中转站
事件委托比给每个克隆节点单独绑事件更靠谱
动态生成的节点没有“出生时刻”，你没法在它出现前就写好 addEventListener。硬要在克隆后一个个绑定，不仅代码冗长，还容易漏掉后续新增项。用事件委托，监听父容器，靠 event.target 匹配实际点击元素，才是可持续方案。
立即学习“前端免费学习笔记（深入）”；
- 绑定位置选在模板容器的父级（比如
document.getElementById('list')），不是 document 全局 - 匹配条件推荐用
event.target.matches('.card__delete-btn')，比 classList.contains 更精准 - 避免在委托回调里反复调用
querySelector，提前缓存选择器逻辑
