HTML <template> 标签

简介

HTML <template> 标签是一种用于存储客户端内容的机制，这些内容可以在加载页面时不被渲染，但随后可以使用 JavaScript 进行实例化。该元素的内容将会被解析为 HTML；但直到 cloneNode() 或 importNode() 等方法被调用来插入文档中之前，它不会被渲染。

基本语法

<template id="my-template">
  <div>
    This is the content of the template. It won't be displayed unless it's cloned and inserted into the document using JavaScript.
  </div>
</template>

在上面的代码中，<template> 元素包裹了一些 HTML 内容。该模板可以通过其 id 属性引用。

如何使用 <template> 标签

1. 获取模板内容

首先，你需要通过 JavaScript 获取对模板的引用：

const template = document.getElementById('my-template');

这将返回一个指向 <template> 元素的引用。

2. 克隆模板内容

接下来，你可以使用 cloneNode() 方法克隆模板中的内容：

const clonedContent = template.content.cloneNode(true);

这将创建一个文档片段（DocumentFragment），其中包含了模板的所有子元素。

3. 插入克隆的内容

最后，你可以使用 appendChild() 或 insertBefore() 等方法将克隆的内容插入到文档中：

document.body.appendChild(clonedContent);

这将在页面上显示模板的内容。

为什么使用 <template> 标签？

  1. 避免重复代码：如果你在多个地方需要相同的 HTML 结构，可以使用模板来避免重复。
  2. 提高性能：因为模板内容不会被渲染，直到它们被明确插入文档中，所以这样可以提高页面加载时的性能。
  3. 增强结构和语义：使用 <template> 元素可以更好地组织代码并使其具有语义含义。

兼容性

所有主要浏览器都支持 <template> 标签，包括 Chrome、Firefox、Safari 和 Edge。但是，在 Internet Explorer 中不支持该元素。如果你需要在不支持 <template> 的浏览器中工作，可以考虑使用其他技术来实现类似的功能。

结论

HTML <template> 标签是一种强大而灵活的机制，可让你存储和操作不会被渲染的 HTML 内容。通过使用 JavaScript 来克隆和插入模板内容，你可以在需要时动态地添加新元素到文档中，从而提高性能并减少代码重复。