如何使用 template 标签创建 HTML 模板？-JavaScript中文网-JavaScript教程资源分享门户

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

推荐答案

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

一个简单的例子如下：

-- -------------------- ---- -------
--------- -----
------
------
  --------------- ---------------
-------
------
  --------- ----------------
    ---- -------------
      --------- ----------------
      ---------- ---------------
    ------
  -----------

  ---- ---------------------

  --------
    ----- -------- - --------------------------------------
    ----- --------- - -------------------------------------

    -- ---------
    ----- --------------- - ---------------------------------

    -- ------
    ----------------------------------------------- - -------- -------
    ---------------------------------------------- - -------- ---------


    -- ----------
    ---------------------------------------
  ---------
-------
-------

本题详细解读

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

主要特点：

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

使用方法：

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

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

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

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

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

const templateContent = template.content;

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

const clonedContent = templateContent.cloneNode(true);

修改模板内容（可选）: 在克隆的模板上进行修改，例如更改文本内容、属性等。
```
 clonedContent.querySelector('h2').textContent = 'New Title';
```
添加到 DOM: 使用 appendChild() 或 insertAdjacentHTML() 等方法将修改后的模板添加到页面的 DOM 树中。
```
  container.appendChild(clonedContent);
```

适用场景：

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

注意事项：

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

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

纠错
反馈