被低估的 <template> 如何成为改变游戏规则的存在！你是否曾希望在不使隐藏元素的情况下动态创建 HTML ？让我

你是否曾希望在不使隐藏元素的情况下动态创建 HTML ？让我来为你介绍 HTML 中一个最被低估的标签：<template> 。

什么是 `<template>` ？

<template> 它允许你定义一段在页面加载时不会立即渲染的 HTML 代码。相反，它会保持隐藏状态，直到你使用 JavaScript 将其激活。

可以将其视为一个预先创建好的 UI 组件，你可以在需要时随时将其插入到网页中。

基本语法

<template id="user-card-template">
  <div class="user-card">
    <h3 class="name"></h3>
    <p class="email"></p>
  </div>
</template>

为什么使用 `<template>`？

使用 <template> 有以下几个优势：

性能提升：它防止了不必要的 DOM 元素在初始加载时被加载。
代码组织：通过避免在主文档中使用隐藏元素，使你的 HTML 更加整洁。
可重用性：你可以多次使用相同的结构。

实际应用

现在，让我们通过一些实际案例来深入了解！

1. 动态生成用户卡片

假设你正在构建一个用户目录，需要动态添加用户卡片。与其手动创建元素，不如使用 <template>。

<template id="user-card-template">
  <div class="user-card">
    <h3 class="name"></h3>
    <p class="email"></p>
  </div>
</template>
<div id="user-list"></div>

现在，让我们使用 JavaScript 填充数据：

const users = [
  { name: "Alice", email: "alice@example.com" },
  { name: "Bob", email: "bob@example.com" },
];

const template = document.getElementById("user-card-template");
const userList = document.getElementById("user-list");

users.forEach(user => {
  const clone = template.content.cloneNode(true);
  clone.querySelector(".name").textContent = user.name;
  clone.querySelector(".email").textContent = user.email;
  userList.appendChild(clone);
});

2. 动态渲染模态弹窗

你是否需要一个在触发时才出现的模态弹窗？<template> 可以存储模态弹窗的结构，并按需创建实例。

<template id="modal-template">
  <div class="modal">
    <p>Are you sure?</p>
    <button class="close-btn">Close</button>
  </div>
</template>
<button id="show-modal">Show Modal</button>
<div id="modal-container"></div>

document.getElementById("show-modal").addEventListener("click", () => {
  const template = document.getElementById("modal-template");
  const modalContainer = document.getElementById("modal-container");

  const modal = template.content.cloneNode(true);
  modal.querySelector(".close-btn").addEventListener("click", () => {
    modalContainer.innerHTML = "";
  });

  modalContainer.appendChild(modal);
});

3. 创建可重用的表格

如果你正在处理表格，<template> 可以简化动态添加行的过程。

<template id="row-template">
  <tr>
    <td class="name"></td>
    <td class="age"></td>
  </tr>
</template>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody id="table-body"></tbody>
</table>

const data = [
  { name: "Charlie", age: 25 },
  { name: "Dana", age: 30 },
];

const template = document.getElementById("row-template");
const tableBody = document.getElementById("table-body");

data.forEach(person => {
  const row = template.content.cloneNode(true);
  row.querySelector(".name").textContent = person.name;
  row.querySelector(".age").textContent = person.age;
  tableBody.appendChild(row);
});

结论

当涉及到创建可重用且高效的动态内容时，<template> 元素是一个改变游戏规则的存在。它使你的 HTML 保持整洁，提升性能，并简化 JavaScript DOM 操作。

下次当你需要生成动态 UI 元素时，不妨尝试使用 <template>。未来的你会感谢现在的你！

原文：dev.to/rijultp/und…

被低估的 <template> 如何成为改变游戏规则的存在！

什么是 <template> ？