HTML怎么用template标签_html template模板标签用法【新手必读】-html教程-PHP中文网

里的js不执行是因为其内容被转为离线documentfragment，script被忽略、资源不加载、事件不绑定；必须用content.clonenode(true)克隆后插入dom才能生效。

html怎么用template标签_html template模板标签用法【新手必读】

HTML 的 <template></template> 标签本身不渲染、不执行、不响应事件——它只是个“冷冻仓库”，内容必须手动克隆后插入 DOM 才能生效，直接写在里面的所有脚本、图片、音频都不会运行。

为什么 `<template></template>` 里的 JS 不执行？

浏览器解析到 <template></template> 时，会把整个内容转为一个文档片段（DocumentFragment），并挂载到 content 属性上。此时内部所有节点处于“离线”状态：

<script></script> 标签被忽略，不会解析也不会执行
<img src="xxx"> 不发起请求，onerror / onload 都不会触发
<video autoplay></video> 不播放，controls 不显示
绑定的 onclick 或 addEventListener 全部失效（因为节点还没在 DOM 中）

怎么正确取出并使用 `<template></template>` 内容？

必须用 JavaScript 显式克隆、插入，且推荐用 content.cloneNode(true)（深克隆）：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

<template id="item-tpl"><li class="item">
    <span class="name"></span>
    <button class="delete">删除</button>
  </li>
</template>

不能用 tpl.innerHTML —— 它返回空字符串（<template></template> 的 innerHTML 是只读且为空的）
不能用 tpl.children —— <template></template> 没有子元素节点，只有 content 属性包含文档片段
如果模板含表单控件（如 <input>），克隆后需重置 value 和 checked，因为克隆的是初始状态，不是当前值

和 `<script type="text/template"></script>` 有什么区别？

老式方案靠伪造 type 让浏览器跳过执行，本质是“骗解析器”；<template></template> 是标准语义化方案，有明确行为规范：

<script type="text/template"></script>：内容作为纯文本存在，需手动 innerHTML 解析，易 XSS（若未转义就插入）
<template></template>：内容是真实 DOM 节点，可直接操作属性、调用方法，安全性更高（不自动执行，无内联事件风险）
兼容性：现代浏览器全支持（Chrome 26+、Firefox 22+、Edge 13+、Safari 9+）；IE 完全不支持，需用 document.createElement('template') + polyfill 补丁

真正容易被忽略的是：模板内容一旦被 cloneNode 插入，它就和普通 DOM 完全一样——但如果你反复克隆同一个 <template></template>，要注意事件监听必须每次插入后单独绑定，不能指望“写在模板里就自动生效”。