必须用 template.content.clonenode(true) 才能稳定渲染列表，因 template.content 是只读 documentfragment，innerhtml 恒为空；直接 appendchild 会搬空内容，浅克隆丢失子节点与表单状态；填值须用 textcontent/value 而非 innerhtml 防 xss；批量插入需用 documentfragment 中转以避免重排重绘。
直接用 template.content.cloneNode(true) 是唯一能稳定渲染列表的方式，其他路径基本都会在第二条数据时静默失败。
为什么 template.innerHTML 总是空字符串
因为 template 的内容被封装在只读的 DocumentFragment 里，不是普通 DOM 子树。浏览器规范强制隔离这部分内容，所以：
• template.innerHTML 永远返回空字符串
• template.children 是空 NodeList
• template.textContent 只返回纯文本（含换行缩进），无法操作结构
必须走 template.content 这个入口，别绕路
克隆必须用 cloneNode(true)，浅克隆或不克隆都出问题
常见错误现象：
• 第二次渲染空白，控制台无报错
• 所有列表项显示相同数据
• 输入框光标丢失、选中状态归零
• 表单值没更新，但 DOM 看起来“填进去了”
原因：
• template.content 是移动语义：直接 appendChild(template.content) 会把内容“搬走”，第二次调用就为空
• cloneNode(false) 只克隆顶层元素，子节点全丢，表单控件、事件监听器、文本节点全失效
• cloneNode(true) 才能复制全部子节点、属性、文本和表单当前值，保留可编辑状态
填值别碰 innerHTML，优先用 textContent 和 value
用 innerHTML 填用户数据等于主动引入 XSS 风险，还会清空模板里已绑定的事件监听器（比如 onclick 或手动加的 addEventListener）：
• 纯文本内容 → el.querySelector('.title').textContent = data.title
• 表单控件 → el.querySelector('input').value = data.inputValue（不是 textContent）
• 需要渲染富文本？先对输入做 HTML 转义（如 text.replace(/&/g, '&')），再塞进 innerHTML
• 模板里含 <script></script> 或 <style></style>？克隆后它们依然不执行、不生效——别指望“活”过来
批量插入必须走 DocumentFragment 中转
循环里每轮都 container.appendChild(cloned)，浏览器就得反复重排重绘：
• 100 条数据就可能卡顿
• 500 条基本卡死
正确做法：
• const frag = document.createDocumentFragment()
• 循环体内：克隆 → 填值 → frag.appendChild(cloned)
• 循环结束后，只调一次 container.appendChild(frag)frag 是轻量中间对象，不在主 DOM 树中，querySelector 查不到它，也不触发样式计算或布局，性能恒定。这点容易被忽略，但它是中等规模列表（200–1000 条）不卡的关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
