如何使用 template 标签创建 HTML 模板？

推荐答案

使用 <template> 标签可以创建 HTML 模板，它不会在页面渲染时显示，其内容可以被 JavaScript 获取并用来动态生成 HTML。 <template> 标签配合 cloneNode() 和 appendChild() 或 insertAdjacentHTML() 等方法使用，可以高效地创建和复用 HTML 结构。

一个简单的例子如下：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title>Template Example</title>
</head>
<body>
  <template id="myTemplate">
    <div class="item">
      <h2>Title Placeholder</h2>
      <p>Content Placeholder</p>
    </div>
  </template>

  <div id="container"></div>

  <script>
    const template = document.getElementById('myTemplate');
    const container = document.getElementById('container');

    // 获取模板内容并克隆
    const templateContent = template.content.cloneNode(true);

    // 修改模板内容
    templateContent.querySelector('h2').textContent = 'Dynamic Title';
    templateContent.querySelector('p').textContent = 'Dynamic Content';


    // 将克隆的模板插入容器
    container.appendChild(templateContent);
  </script>
</body>
</html>

本题详细解读

<template> 标签本身并不会被浏览器渲染，它的内容会被视为文档片段（DocumentFragment），而不是直接的 DOM 节点。这使得它成为存储 HTML 结构并重复利用的理想选择。

主要特点：

1. 不可见性: <template> 标签及其内容在页面加载时不可见，也不会影响页面布局。
2. 惰性渲染: 只有在通过 JavaScript 手动将模板内容添加到 DOM 时，才会渲染。
3. 文档片段: 模板的内容本质上是文档片段，可以被复制和操作。
4. 复用性: 模板可以被多次克隆和使用，减少重复代码，提高性能。

使用方法：

1. 定义模板: 使用 <template> 标签包裹需要重复利用的 HTML 结构，并为其设置唯一的 id 属性。

<template id="myTemplate">
    <div>...</div>
</template>

1. 获取模板: 通过 document.getElementById() 获取 <template> 元素。

const template = document.getElementById('myTemplate');

1. 获取模板内容: 使用 template.content 属性获取模板的内容，它是一个 DocumentFragment 对象。

const templateContent = template.content;

1. 克隆模板: 使用 cloneNode(true) 方法克隆模板内容，true 参数表示深拷贝，包含所有子元素。

const clonedContent = templateContent.cloneNode(true);

1. 修改模板内容（可选）: 在克隆的模板上进行修改，例如更改文本内容、属性等。

    clonedContent.querySelector('h2').textContent = 'New Title';

2. 添加到 DOM: 使用 appendChild() 或 insertAdjacentHTML() 等方法将修改后的模板添加到页面的 DOM 树中。

     container.appendChild(clonedContent);

适用场景：

• 列表渲染: 根据数据动态生成列表项，避免重复编写 HTML 结构。
• 组件化开发: 构建可复用的 UI 组件。
• 动态内容生成: 根据用户输入或其他数据动态生成 HTML 内容。
• 避免硬编码: 将重复的 HTML 结构抽象为模板，提高代码可维护性。

注意事项：

• template.content 返回的是 DocumentFragment 对象，而不是 HTMLElement 对象。
• 必须克隆模板内容，直接操作 template.content 会导致后续无法正确复用模板。
• <template> 标签不能出现在 <head> 标签内。

通过 <template> 标签，开发者可以更清晰、高效地管理 HTML 结构，使得代码更易读、易维护，并减少重复劳动。