<template> 是浏览器原生支持的惰性模板容器，不渲染、不执行脚本、不加载资源；需通过 content.cloneNode(true) 克隆后填充再插入，仅解决安全存储与复用 HTML 片段问题。
直接用 <template> 标签包裹 HTML 片段，再用 JavaScript 克隆、填充、插入——它不渲染、不执行脚本、不加载资源，是浏览器原生支持的“惰性模板容器”，比手拼字符串或引入 Handlebars 更轻量、更安全。
为什么不能直接写在 DOM 里渲染
<template> 的核心设计就是“不激活”：里面的内容不会被解析、不会触发 <img> 加载、不会执行 <script>、也不会绑定事件。这是它和 <script type="text/html"> 的本质区别——后者只是被浏览器忽略，但若误放 script 标签或未加 type，就会出错或提前执行。
常见错误现象：
- 把模板写成 <div id="user-tpl">{{name}}</div>，然后用 innerHTML 替换——这会把占位符当纯文本，且每次操作都触发重排
- 在 <template> 里写 <script>console.log("run")</script>——它真的一行都不会执行，别指望靠它初始化逻辑
怎么克隆 + 填充 + 插入
标准三步走，用 content 属性取内容、cloneNode(true) 复制、再用 querySelector 或 textContent 填值：
const tpl = document.querySelector('#user-card');
const instance = tpl.content.cloneNode(true);
instance.querySelector('.name').textContent = '张三';
instance.querySelector('.age').textContent = 28;
document.body.appendChild(instance);要点：
立即学习“前端免费学习笔记（深入）”；
-
tpl.content是 DocumentFragment，必须cloneNode(true)才能复用；直接 append 会移动原节点 - 不要对
tpl.content直接操作——它只有一份，改一次，下次 clone 就带脏数据 - 填值优先用
textContent（防 XSS），需要 HTML 内容才用innerHTML，但得确保来源可信 - 如果模板里有
<input>，clone 后需手动重置value和checked，因为属性不会随 clone 复制
和 Handlebars / EJS 等引擎的区别在哪
<template> 是 DOM 层的基础设施，不是模板引擎——它不解析 {{}}、不支持 {{#if}}、也不提供 helper 注册机制。它只解决“怎么安全存一段 HTML 并多次实例化”这个单一问题。
所以：
- 要循环渲染列表？得自己写
for或forEach，调用多次 clone + fill - 要条件显示某块？得用 JS 控制
instance.querySelector('.admin-only').remove()或.style.display = 'none' - 要复用子模板？可以用多个
<template id="item">+<template id="list">，但嵌套渲染得手动递归处理 - 想保留占位符语法？可以配合正则替换，但那是你自己的简易 parser，不是标准行为
真正容易被忽略的是：template 的 content 是只读的 DocumentFragment，它没有 innerHTML setter，也不能直接 appendChild 到自身；所有操作都得走 clone → 修改 → 插入流程，跳过任一环都会静默失败或 DOM 错乱。
