template标签是已解析但挂起的DOM片段，必须clone后才能复用；其content为DocumentFragment，只能插入一次，重复使用需cloneNode(true)或importNode；现代浏览器支持，IE不支持。
template 标签不是“隐藏元素”，也不是“备用 HTML 字符串容器”——它是一个已解析但被挂起的 DOM 片段，**直接插入无效，必须 clone 后才能复用**。IE 完全不支持，其他现代浏览器均可用。
为什么 template.content 取出来后只能用一次
因为 template.content 返回的是一个 DocumentFragment，它的行为类似“剪切粘贴”：第一次 appendChild() 会把整个 fragment 移动过去，节点从原处消失；第二次再 append，fragment 已空，静默失败，页面无反应。
- 错误写法：
const frag = template.content; container.appendChild(frag); container.appendChild(frag);→ 第二次什么也不发生 - 正确写法：
const frag = template.content.cloneNode(true);或document.importNode(template.content, true) - 注意：
cloneNode(true)是深克隆，必须传true，否则只克隆 fragment 容器本身，不包含子节点
用 template 渲染列表时，如何安全注入动态数据
不能靠 innerHTML 拼接字符串（XSS 风险），也不能直接改 template 内部文本节点（会污染模板本体）。应操作克隆后的副本节点。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 先克隆：
const card = template.content.cloneNode(true); - 再查节点并赋值：
card.querySelector('.product-name').textContent = product.name; - 图片等属性用
setAttribute：card.querySelector('img').setAttribute('src', product.imageUrl); - 避免用
innerHTML = ...插入用户输入内容，尤其当数据来自 API 或表单时
template 和 <script type="text/template"> 的关键区别
老项目常用 script 标签存模板字符串，但这绕过了 HTML 解析器校验，有安全隐患且结构不可靠；template 是原生 DOM 解析，结构合法、可调试、无执行风险。
立即学习“前端免费学习笔记（深入）”；
-
<script type="text/template"><div>{{name}}</div></script>：内容是纯文本，JS 需手动innerHTML解析，可能触发内联脚本或加载远程资源 -
<template><div><span></span></div></template>：内容已是有效 DOM 节点，img不加载、script不执行、style不生效，直到你主动移出 template - DevTools 中可直接展开查看
template内部结构，而script模板只能看到原始字符串
最容易被忽略的一点：template 内部的 id 属性在克隆后仍存在，如果多次插入，会导致页面出现重复 id —— 这违反 HTML 规范，可能破坏 getElementById 或 CSS 选择器行为。务必在克隆后清除或重置 id，或改用 class + 数据属性定位。
