HTML中template标签定义不渲染DOM模板的激活方法-html教程-PHP中文网

template.content.clonenode(true)是唯一激活路径，直接append template标签不渲染；content是只读documentfragment，须深克隆后操作节点、事件及样式，script/style不自动执行，table中template需外置，slot需shadow dom支持。

html中template标签定义不渲染dom模板的激活方法

template.content.cloneNode(true) 是唯一激活路径

直接把 <template></template> 元素 append 到页面里不会渲染任何内容，它本身不参与 DOM 构建；真正“激活”的动作只能是：取它的 content 属性，再调用 cloneNode(true)。这个 content 是只读的 DocumentFragment，不是普通节点集合，不能用 [0] 或 .children 访问子元素。

常见错误包括：

写 container.appendChild(template) —— 移动的是 template 标签本身，不是内容
写 template.content.cloneNode()（缺 true）—— 浅克隆只复制空 fragment 容器，插入后页面空白，控制台无报错
反复用 template.content 直接插入 —— 第一次成功，第二次 appendChild 会静默失败，因为 content 已被移出

克隆后才能操作内部元素和事件

克隆出来的节点是真实 DOM 实例，支持常规 DOM 操作，但原始模板里的结构完全不可见、不可查、不可改。比如你写了 <template id="card"><div id="title">xxx</div></template>，那么 document.getElementById("title") 一定返回 null，必须先克隆再查：

Multi-Brain Protocol

一款AI工具，主要用于在主代理响应前，并行运行Kimi K2.5和GPT 5.3 Codex，注入双方观点以增强认知多样性，适合需要提升相关任务效率的用户。

下载

const clone = tmpl.content.cloneNode(true)
clone.querySelector(".title").textContent = "新标题"
clone.querySelector("button").addEventListener("click", handler)
避免在模板里写 onclick="doSomething()" —— 克隆后仍是字符串，函数作用域也不存在

template 内的 script 和 style 不会自动生效

<template></template> 中的 <script></script> 标签不会执行，<style></style> 也不会注入样式表 —— 这是浏览器的安全设计，不是 bug。如果你需要动态加载逻辑或样式，得手动处理：

脚本要运行？创建新 <script></script> 元素，设 textContent 或 src，再 append 到克隆后的 fragment 里
样式要局部生效？别往 template 里塞 <style></style>，改用 class + 外部 CSS；真要封装，配合 Shadow DOM
图片、iframe 等资源不会预加载 —— 克隆插入后才开始请求，这是惰性的核心价值

table 场景下 template 不能当直接子元素

写成 <table><template><tr><td>A</td></tr></template></table> 是危险的。浏览器会自动把 <template></template> 提升到 <table> 外，破坏 DOM 结构和语义。正确做法是： <ul><li>把 <code><template></template> 放在 <table> 外（比如紧邻下方） <li>用 JS 找到目标 <code><tbody>，再把克隆后的 fragment 插入进去 <li>如果模板内含 <code><slot></slot>，确保宿主元素已启用 Shadow DOM，否则 slot 不会分发

容易被忽略的一点是：template 的惰性是彻底的 —— 它不生成任何节点、不触发任何解析副作用、也不占用布局计算。一旦你依赖它做 SSR 或跨框架复用，就得自己兜底 JS 激活逻辑，服务端吐出的只是个空壳标签。