HTML中``标签的作用是定义一个可重用的客户端模板，用于动态生成内容。它不会被浏览器渲染，但可以被JavaScript访问和操作。使用方法包括：在``标签内编写HTML结构，通过JavaScript获取该模板并克隆其内容，然后插入到页面中。这种方式常用于动态加载数据或重复元素的生成。

HTML 的 `

template.content 是唯一能取到模板内容的属性

直接访问 template.innerHTML 会得到空字符串，template.children 也是空 NodeList——因为浏览器根本不会把模板内容解析为真实子节点。真正承载结构的是只读的 content 属性，它返回一个 DocumentFragment。

常见错误是写成：template.querySelector('.name')，这永远查不到；正确写法是：template.content.querySelector('.name')。

• 必须用 .content 才能访问内部 DOM 节点
• DocumentFragment 不是普通元素，不能直接 appendChild 到页面，必须先克隆
• 克隆后才能自由修改文本、属性、事件绑定等

克隆必须用 cloneNode(true) 或 importNode

直接把 template.content append 到页面，只会移动一次——第二次再 append 就什么都没有了，因为 DocumentFragment 是“单次使用”的。必须显式克隆才能复用。

两种等效写法：template.content.cloneNode(true) 或 document.importNode(template.content, true)。后者更语义明确，推荐在跨文档场景（如 iframe）中使用。

• cloneNode(true) 深度克隆所有子节点，包括文本、元素、注释
• 不加 true（即浅克隆）只克隆