template标签不渲染，必须用template.content.clonenode(true)克隆；直接appendchild(template)为空，因content是只读documentfragment，插入即移出不可复用。
template 标签本身不渲染，克隆必须用 content.cloneNode(true)，漏掉 .content 或没传 true 就等于白干。
为什么直接 appendChild(template) 什么也不显示？
因为 template 是个“休眠容器”，它的 HTML 结构藏在只读的 content 属性里，不是普通子节点。直接 appendChild(template) 插入的是空标签本身；appendChild(template.content) 虽能显示一次，但第二次就静默失败——content 是 DocumentFragment，插入即移出，不可复用。
- ✅ 正确写法：
const instance = template.content.cloneNode(true) - ❌ 错误写法：
template.innerHTML→ 总是空字符串 - ❌ 错误写法：
template.appendChild(...)→template不接受子节点 - ❌ 错误写法：
template.content.cloneNode(false)→ 只克隆空 fragment，没内容
克隆后怎么安全填数据？
克隆出来的节点已脱离文档，可自由改文本、属性、事件，但不能靠 innerHTML 填用户输入——有 XSS 风险，还会清掉已有事件监听器。
- 文本内容一律用
el.textContent = data.title - 表单值用
input.value = data.price，别碰innerHTML - ID 重复会破坏
document.getElementById，必须重设：el.id = 'item-' + Date.now() - 图片、脚本、样式在克隆后才真正激活，
src和onclick才开始起作用
批量插入时性能卡顿怎么办？
循环里对真实 DOM 每次 appendChild，100 条以上就会明显卡顿。浏览器得反复重排重绘。
- ✅ 正确做法：先创建
document.createDocumentFragment()，把所有克隆节点appendChild进去，最后一次性插入目标容器 - ❌ 错误做法：每克隆一个就立刻
appendChild到页面 - 注意：克隆后的节点不能复用——
frag.appendChild(instance)后，instance就从原 frag 移走了，再 append 会失效
template 放错位置会导致内容丢失
浏览器对 template 的嵌套位置有硬性限制。放错地方，内容会被自动挪走、截断，甚至彻底丢弃。
- ✅ 合法位置：
<template id="card">...</template> - ❌ 非法位置：
<table><template><tr><td></td></tr></template></table>→template被提到<table> 外 <li>❌ 非法位置：<code><div><template>...</template></div>→ 内容可能被忽略 - ❌ 非法位置：
<script><template></script>→ 解析失败，content为空
最常被忽略的点是：克隆后没处理 ID 冲突、没检查 querySelector 返回 null、以及把 template.content 当成普通 DOM 节点反复取用——它真的一次性消耗品，每次都要重新 .cloneNode(true)。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
