如何用标签预定义不显示的 HTML 模板结构-js教程-PHP中文网

里的内容默认不渲染，因为它是惰性容器，子节点解析时不加入dom、不执行脚本、不加载资源，与display:none等视觉隐藏有本质区别。

如何用 <template> 标签预定义不显示的 html 模板结构

为什么 `<template></template>` 里的内容默认不渲染

<template></template> 是浏览器原生支持的“惰性容器”，它的子节点在解析时不会被添加到 DOM 树，也不会触发脚本执行、图片加载或样式计算。这和 <script type="text/template"></script> 或隐藏的 <div style="display:none"> 有本质区别：前者是语义化模板，后者只是视觉隐藏但已参与 DOM 构建和资源加载。 <p>常见误操作是直接写 <code><template><div id="item">xxx</div></template> 然后试图用 document.getElementById("item") 获取——它永远找不到，因为里面的内容根本没进 DOM。

如何安全提取并插入 `<template></template>` 内容

必须通过 .content 属性访问其文档片段（DocumentFragment），再用 cloneNode(true) 复制后插入目标位置。直接 appendChild(template) 会移动原始模板，导致后续调用失效。

错误写法：parent.appendChild(template) —— 模板被移走，第二次调用就空了
正确写法：parent.appendChild(template.content.cloneNode(true))
若需动态填充，先克隆，再遍历 .content 的子节点操作（比如改 textContent 或设 dataset）
注意：.content 不是 HTMLCollection，不能用 [0] 索引，要用 .firstElementChild 或 .querySelector

在 Vue/React 中还该用 `<template></template>` 吗

一般不该。Vue 的 <template></template> 是编译时语法糖，和 HTML 原生 <template></template> 无关；React 完全不识别它。强行混用会导致：

Vue 单文件组件里写原生 <template></template> 标签 → 被 Vue 编译器忽略或报错
React JSX 中写 <template></template> → React 渲染为真实 DOM 节点，但内容仍不显示，且无法用 ref 访问 .content
真正需要跨框架复用模板时，应导出为字符串或函数，而非依赖 HTML 解析

兼容性与容易被忽略的细节

<template></template> 在 IE 中完全不支持，Edge 13+、Chrome 26+、Firefox 22+ 支持良好。但有几个硬伤常被忽略：

<template></template> 不能作为 <table> 的直接子元素（如 <code><table><template>...</template></table>）→ 浏览器会自动将其提升到 <table> 外，破坏结构 <li>模板内写 <code><style></style> 或 <script></script> 标签 → 不会执行，也不会注入样式作用域，纯静态文本
服务端渲染（SSR）时，<template></template> 会被当作普通标签输出，客户端 JS 必须主动接管，否则就是一堆不可见的空壳

最稳妥的做法：只用它存纯结构化的 HTML 片段，所有逻辑、数据绑定、样式隔离都交给 JS 控制，别指望它自动“活”起来。