<template>里的JS不执行是因为其内容被转为离线DocumentFragment，script被忽略、资源不加载、事件不绑定；必须用content.cloneNode(true)克隆后插入DOM才能生效。
HTML 的 <template> 标签本身不渲染、不执行、不响应事件——它只是个“冷冻仓库”，内容必须手动克隆后插入 DOM 才能生效，直接写在里面的所有脚本、图片、音频都不会运行。
为什么 <template> 里的 JS 不执行？
浏览器解析到 <template> 时，会把整个内容转为一个文档片段（DocumentFragment），并挂载到 content 属性上。此时内部所有节点处于“离线”状态：
-
<script>标签被忽略，不会解析也不会执行 -
<img src="xxx">不发起请求，onerror/onload都不会触发 -
<video autoplay>不播放，controls不显示 - 绑定的
onclick或addEventListener全部失效（因为节点还没在 DOM 中）
怎么正确取出并使用 <template> 内容？
必须用 JavaScript 显式克隆、插入，且推荐用 content.cloneNode(true)（深克隆）：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<template id="item-tpl">
<li class="item">
<span class="name"></span>
<button class="delete">删除</button>
</li>
</template>
<ul id="list"></ul>
<script>
const tpl = document.getElementById('item-tpl');
const list = document.getElementById('list');
// ✅ 正确：克隆 content 下的所有子节点
const instance = tpl.content.cloneNode(true);
instance.querySelector('.name').textContent = '张三';
list.appendChild(instance);
</script>
- 不能用
tpl.innerHTML—— 它返回空字符串（<template>的 innerHTML 是只读且为空的） - 不能用
tpl.children——<template>没有子元素节点，只有content属性包含文档片段 - 如果模板含表单控件（如
<input>），克隆后需重置value和checked，因为克隆的是初始状态，不是当前值
和 <script type="text/template"> 有什么区别？
老式方案靠伪造 type 让浏览器跳过执行，本质是“骗解析器”；<template> 是标准语义化方案，有明确行为规范：
立即学习“前端免费学习笔记（深入）”；
-
<script type="text/template">：内容作为纯文本存在，需手动innerHTML解析，易 XSS（若未转义就插入） -
<template>：内容是真实 DOM 节点，可直接操作属性、调用方法，安全性更高（不自动执行，无内联事件风险） - 兼容性：现代浏览器全支持（Chrome 26+、Firefox 22+、Edge 13+、Safari 9+）；IE 完全不支持，需用
document.createElement('template')+ polyfill 补丁
真正容易被忽略的是：模板内容一旦被 cloneNode 插入，它就和普通 DOM 完全一样——但如果你反复克隆同一个 <template>，要注意事件监听必须每次插入后单独绑定，不能指望“写在模板里就自动生效”。
