请解释 HTML Templates 的概念和作用。如何创建和使用 HTML Templates？-JavaScript中文网-JavaScript教程资源分享门户

请解释 HTML Templates 的概念和作用。如何创建和使用 HTML Templates？

推荐答案

HTML Templates 是一种 HTML 标签 <template>，它用于存放客户端代码片段，这些片段在页面加载时不会被渲染，直到被 JavaScript 代码显式调用才会生效。它允许我们定义可重用的 HTML 结构，动态地插入到 DOM 中。

作用：

延迟渲染： <template> 标签内的内容不会在页面加载时渲染，避免了不必要的性能消耗。
代码复用： 可以创建可复用的 HTML 结构，方便在多个地方使用。
动态生成： 配合 JavaScript 可以动态生成内容并插入到 DOM 中。
避免污染： 模板内容不会被浏览器解析和执行，从而避免了可能的脚本注入或意外行为。

创建和使用：

创建模板： 使用 <template> 标签包裹需要复用的 HTML 结构，并指定一个唯一的 id 属性。
```
<template id="myTemplate">
  <div class="item">
    <h3></h3>
    <p></p>
  </div>
</template>
```
获取模板： 使用 JavaScript 获取 <template> 元素。
```
const template = document.getElementById('myTemplate');
```
克隆模板内容： 使用 template.content.cloneNode(true) 克隆模板的整个内容。
```
const clone = template.content.cloneNode(true);
```

修改克隆内容： 可以通过 JavaScript 修改克隆出来的 HTML 结构。

const h3 = clone.querySelector('h3');
const p = clone.querySelector('p');
h3.textContent = '标题';
p.textContent = '描述';

添加到 DOM： 将修改后的克隆内容添加到指定的 DOM 元素中。

const container = document.getElementById('container');
container.appendChild(clone);

本题详细解读

什么是 HTML Templates

HTML Templates 指的是 HTML 中的 <template> 标签，它是 HTML5 引入的特性。<template> 标签本身并不会直接显示在页面上，它定义了一块可以被 JavaScript 脚本读取和操作的 HTML 片段，类似于一个“模版”。这个模版可以根据不同的数据动态地渲染成最终的 HTML 内容，并插入到页面中。

`<template>` 的特性

不可见性: <template> 标签内的内容不会在页面初始加载时显示，也不会被浏览器进行任何解析和渲染。这保证了只有在 JavaScript 显式调用时才会生效。
惰性加载: 因为 template 的内容不会立即渲染，这避免了加载时就进行不必要的处理，提高了页面性能。它类似于“延迟加载”，只有需要用到的时候才被激活。
代码结构化: <template> 标签将可复用的 HTML 片段封装在一起，使代码结构更清晰、易于维护。
复用性: 配合 JavaScript，我们可以多次克隆模板内容，并根据不同的数据进行修改，从而生成不同的 HTML 内容，实现了代码的复用。
安全性: template 的内容不会被浏览器当做活动的内容解析（如不会执行其中的 script 标签），避免了潜在的跨站脚本攻击（XSS）风险。

如何创建和使用 HTML Templates

创建和使用 HTML Templates 通常包括以下步骤：

定义模板： 使用 <template> 标签定义 HTML 模板，可以包含任何 HTML 内容。模板通常需要一个 id 属性以便在 JavaScript 中方便获取。

<template id="userTemplate">
  <div class="user-card">
    <img src="" alt="user image" class="user-img">
    <h2 class="user-name"></h2>
    <p class="user-email"></p>
  </div>
</template>

获取模板元素： 使用 document.getElementById() 或其他 DOM 选择器，获取 <template> 元素。
```
const template = document.getElementById('userTemplate');
```
克隆模板内容： 使用 template.content.cloneNode(true) 方法创建一个模板内容的深拷贝。 true 参数表示克隆所有子节点。
```
const clone = template.content.cloneNode(true);
```

修改克隆内容： 使用 DOM 操作方法（如 querySelector()、textContent、setAttribute() 等），根据需要修改克隆出来的 HTML 结构。

const userImg = clone.querySelector('.user-img');
const userName = clone.querySelector('.user-name');
const userEmail = clone.querySelector('.user-email');

userImg.src = userData.image;
userName.textContent = userData.name;
userEmail.textContent = userData.email;

添加到 DOM： 使用 appendChild()、insertBefore() 或其他 DOM 操作方法，将修改后的克隆内容添加到页面中的目标元素。
```
const container = document.getElementById('userContainer');
container.appendChild(clone);
```

完整示例：

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

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

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


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

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

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

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

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

这个示例演示了如何使用 HTML Templates 配合 JavaScript，动态地生成并添加到 DOM。

纠错
反馈