HTML <template> 标签HTML 中的 <template> 标签是用来定义页面中的模板内容，但不会在页面加

1. 概念

HTML 中的 <template> 标签是用来定义页面中的模板内容，但不会在页面加载时呈现。它允许你在文档中定义模板，然后在需要时使用 JavaScript 处理该模板内容，将其插入到页面中。

基本上，<template> 标签中的内容可以包含任何 HTML 结构，类似于你要在页面中显示的内容，但是默认情况下它是不可见的。

2. 例子

<template id="myTemplate">
  <div>
     <h2>你好，我是一个模板！</h2>
     <p>这是模板元素内的一些内容。</p>
  </div>
</template>

通过 JavaScript，你可以使用 <template> 中的内容：

// 获取 template 元素
const template = document.getElementById('myTemplate');

// 复制模板内容
const clone = document.importNode(template.content, true);

// 插入复制的内容到页面中
document.body.appendChild(clone);

在这个示例中，<template> 中的内容被获取并插入到文档的末尾。这种方法使得可以在需要的时候使用同一个模板，避免了在页面加载时立即显示模板内容。

结果

WX20231107-113451@2x.png

3. 总结

这在创建可复用的 HTML 结构，尤其是在 JavaScript 渲染和控制内容的情况下非常有用。