<template>标签用于声明不渲染、不执行、不加载资源的HTML片段，仅作为惰性DOM仓库；须通过template.content.cloneNode(true)克隆后插入DOM才能生效。
Template 标签用于声明一段不会被浏览器立即解析、渲染或执行的 HTML 片段，仅作为“模板”存在，直到你通过 JavaScript 显式克隆并插入到文档中。
Template 标签的基本用法
将需要复用但暂不渲染的 HTML 写在 <template> 标签内。浏览器会解析该标签的结构，但**不创建 DOM 节点、不加载资源（如图片、iframe）、不执行脚本、不触发样式计算**。
- 模板内容默认不可见，也不在
document.body或其他容器中出现 - 可通过
template.content属性访问其内部的 DocumentFragment - 必须用 JavaScript 克隆（
cloneNode(true)）后才能安全插入真实 DOM
正确插入模板内容的步骤
直接使用 innerHTML 或 append(template) 不起作用——因为 <template> 本身不是可渲染元素，它的内容藏在 .content 里。
- 获取 template 元素：
const tmpl = document.querySelector('#my-template'); - 克隆其内容：
const fragment = tmpl.content.cloneNode(true); - 插入目标容器：
container.append(fragment);（或container.appendChild(fragment);）
注意：不能用 tmpl.content 原样插入多次，因为它是一个 DocumentFragment，插入一次后即从 fragment 中移除；每次都要重新 cloneNode。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
结合数据动态生成内容
Template 本身不支持数据绑定，需配合 JS 手动填充。常见做法是把模板写成含占位符的结构，再用 JS 替换文本或设置属性。
- 例如模板中写
<div class="item" data-id="{{id}}>{{name}}</div>，再用element.innerHTML.replace(/{{\w+}}/g, ...)替换 - 更稳妥的方式是用
querySelector定位内部元素，逐个赋值：item.querySelector('.name').textContent = data.name; - 也可配合
dataset或自定义属性传递初始参数，提升复用性
与其他方案（如 script[type="text/template"]）的区别
过去常用 <script type="text/template"> 存放模板字符串，但它只是纯文本，浏览器完全不解析 HTML 结构，易出引号/转义问题，且无法享受 HTML 编辑器语法高亮和验证。
-
<template>是标准 HTML5 元素，语义明确，结构合法，支持嵌套、自动解析 HTML 实体 - 编辑器能识别并高亮，校验工具可检查内部语法错误
- 无需手动
innerHTML解析字符串，避免 XSS 风险（前提是不拼接不可信 HTML）
