template.content.clonenode(true) 是唯一安全克隆方式，因 template.content 是 documentfragment，只能有一个父节点，直接 appendchild 会导致第二次为空；必须深克隆以避免渲染异常、状态丢失等问题。
template.content.cloneNode(true) 是唯一安全克隆方式
直接 appendChild(template.content) 看似简单，但第二次调用时 template.content 就为空了——因为它是 DocumentFragment，只能有一个父节点。这不是 bug，是浏览器规范行为。
必须用 cloneNode(true) 深克隆，否则后续渲染静默失败：列表项全显示相同数据、input 光标丢失、选中状态归零，都是浅克隆或没克隆的典型症状。
-
cloneNode(false)只克隆顶层元素，子节点全丢，完全不可用 -
cloneNode(true)复制全部子节点、属性、文本和表单值，保留可编辑状态 - 跨 iframe 场景下更推荐
document.importNode(template.content, true)，兼容性略好
填值必须绕开 innerHTML，优先用 textContent 和 value
在克隆后的节点上用 innerHTML 填用户数据，等于主动引入 XSS 风险，还会清空已绑定的事件监听器（比如模板里写好的 onclick 或手动加的 addEventListener）。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 纯文本内容 →
el.querySelector('.title').textContent = data.title - 表单控件 →
el.querySelector('input').value = data.inputValue（不是textContent） - 需渲染富文本？先对输入做 HTML 转义（如
text.replace(/&/g, '&')），再塞进innerHTML -
template内的<script></script>或<style></style>克隆后依然不执行、不生效，别指望“活”过来
批量插入必须走 DocumentFragment 中转
循环里每轮都 container.appendChild(cloned)，浏览器就得反复触发重排重绘。100 条就可能卡顿，500 条基本卡死——这不是理论瓶颈，是真实 DOM 操作代价。
- 必须用
DocumentFragment作中转容器：const frag = document.createDocumentFragment() - 循环体内：克隆 → 填值 →
frag.appendChild(cloned) - 循环结束后，只调一次
container.appendChild(frag) -
frag是轻量中间对象，不在主 DOM 树中，querySelector查不到它，也不触发布局
template 本身不缓存节点，复用靠自己管生命周期
<template></template> 只是惰性容器，不执行脚本、不加载资源、不触发样式计算。它不自动缓存节点，也不预编译结构。“高性能复用”的关键不在标签本身，而在你如何管理克隆后的节点。
- 直接反复调用
template.content.cloneNode(true)安全但非最优：每次新建所有节点，无内存复用 - 若需真复用（如虚拟滚动回收），得自己维护节点池，
<template></template>只负责提供初始结构 -
<template></template>内不能含顶层文本节点（换行/空格会被忽略），必须包裹在元素内，否则.content取不到预期结构 - 克隆后若含
id属性，必须重置（如el.id = 'item-' + Date.now()），否则 ID 重复导致getElementById行为不可靠
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
