必须用template.content.cloneNode(true)获取副本并手动处理表单值、事件绑定和ID唯一性，直接操作template元素无效；批量渲染应通过DocumentFragment中转以提升性能。
直接用 template.content.cloneNode(true) 获取可插入的副本，再手动填充内容、绑定事件、处理 ID 冲突——这是唯一可靠路径。跳过克隆或漏掉后续处理，模板就只是页面里一段“死 HTML”。
必须从 content 克隆，不能直接操作 template 元素
<template></template> 的内容不在主 DOM 树中，它的 innerHTML 是空字符串，children 是空集合，textContent 也不包含结构。唯一合法入口是 content 属性，它返回一个只读的 DocumentFragment。
- ✅ 正确：
const clone = tmpl.content.cloneNode(true) - ❌ 错误：
tmpl.innerHTML（始终为空） - ❌ 错误：
tmpl.children[0]（根本不存在） - ❌ 错误：
document.body.appendChild(tmpl.content)（第一次成功，第二次静默失败）
克隆后要立即处理三类关键细节
克隆出来的节点是“干净但裸露”的：表单值未同步、事件未注册、ID 不唯一。不处理，就会出现点击无响应、提交数据错乱、label 点不中输入框等问题。
-
表单控件重设值：克隆后
<input value="初始值">的.value仍是空字符串，需手动赋值：clone.querySelector('input').value = data.inputValue -
事件必须重新绑定：内联
onclick不生效，<button onclick="doSomething()"></button>克隆后只是带字符串属性的按钮。要用addEventListener显式注册，或在父容器上用事件委托 -
ID 和 for 属性必须更新：多个实例共用相同
id会破坏document.getElementById和<label for="xxx"></label>关联。建议用crypto.randomUUID().slice(0,8)生成唯一 ID，并同步更新对应label[for]
批量渲染时推荐用 DocumentFragment 中转
如果一次要插入十几个克隆实例，逐个 appendChild 会触发多次重排（reflow），影响性能。更高效的做法是先创建一个临时 DocumentFragment，把所有克隆节点 append 进去，最后一次性插入目标容器。
立即学习“Java免费学习笔记（深入）”；
- 避免：
for (let i = 0; i - 推荐：
const frag = document.createDocumentFragment(); for (...) { frag.appendChild(clone); } parent.appendChild(frag);
模板位置必须合法，否则解析即失效
<template></template> 只能在 或 的**直接子级**中使用。放在 <div>、<code><table>、<code><script></script> 内部，浏览器会自动将其移出、截断甚至丢弃内容。
- ✅ 合法：
<template id="card"><div>...</div></template> - ❌ 非法：
<div><template>...</template></div>（内容可能被忽略） - ❌ 非法：
<table><template><tr><td>...</td></tr></template></table>（<template></template>会被提到<table> 外） </table>
