为什么使用HTML ＜template＞ 标签？

随着 React、Vue、Angular 和所有其他前端 JavaScript 框架如此流行，许多人忘记了普通的 HTML 和 JavaScript，但今天构建的大多数网站仍然使用纯 HTML 和 JavaScript。即使前端框架变得越来越流行，仍然有许多网站使用完整的前端框架构建没有意义，因为它们还不够复杂。不过，可能仍然需要一些复杂的动态内容，而传统上，在纯 JavaScript 中执行这些内容可能会非常痛苦。幸运的是，HTML 中的模板标签使得添加动态内容比以前容易得多。

什么是＜template＞ 标签？

模板标签是一个 HTML 标签，允许您创建一组不呈现到页面的 HTML 元素。你可以把它想象成一个不显示的 div，其中包含 HTML，但是模板标签有一些方便的功能，比不显示的 div 更容易使用。

首先，使用模板标签可以非常清楚地表明，其中的 HTML 用于 JavaScript 以呈现动态内容。其次，模板标签有非常方便的方法来复制其中的内容，因此可以重复地将其添加到 DOM 中。因此，模板标签的最佳用例是一个可以动态添加的列表。

<ul>
  <li>
    <span>Item 1: </span>
    <span>Content 1</span>
  </li>
  <li>
    <span>Item 2: </span>
    <span>Content 2</span>
  </li>
</ul>

在上面的例子中，如果你想向列表中添加一个新元素，那么所有的 HTMLli都需要存在于非常混乱且容易出错的 JavaScript 代码中，但是通过向上面的 HTML 添加一个模板标签，我们可以移动所有的 HTML 都出自 JavaScript。

<ul>
  <li>
    <span>Item 1: </span>
    <span>Content 1</span>
  </li>
  <li>
    <span>Item 2: </span>
    <span>Content 2</span>
  </li>
</ul>

<template>
  <li>
    <span>Item: </span>
    <span>Content</span>
  </li>
</template>

现在我们li是在 HTML 和 JavaScript 中定义的，我们可以抓取模板内容并将其复制到我们的原始列表中。让我们谈谈如何做到这一点。

如何在 JavaScript 中使用模板标签

首先，我们需要在 HTML 中添加一些 ids/classes，以便我们可以在 JavaScript 中选择元素。让我们还添加一个用于添加新项目的按钮。

<ul id="list">
  <li>
    <span>Item 1: </span>
    <span>Content 1</span>
  </li>
  <li>
    <span>Item 2: </span>
    <span>Content 2</span>
  </li>
</ul>
<button id="add-item">Add Item</button>

<template id="list-item-template">
  <li>
    <span class="title">Item: </span>
    <span class="content">Content</span>
  </li>
</template>

现在，我们可以深入了解 JavaScript。

const template = document.getElementById('list-item-template')
const list = document.getElementById('list')
const button = document.getElementById('add-item')
let itemCount = list.children.length

button.addEventListener('click', () => {
  const item = template.content.cloneNode(true)
  itemCount++
  item.querySelector('.title').innerText = `Item ${itemCount}: `
  item.querySelector('.content').innerText = `Content ${itemCount}`
  list.append(item)
})

在这个 JavaScript 的顶部，我们获得了对模板、列表、按钮和列表中项目数的引用。从那里我们为单击按钮添加一个事件侦听器以添加我们的新项目。下一行是模板的所有魔力发挥作用的地方。

const item = template.content.cloneNode(true)

在这一行中，我们正在获取模板的内容，即li并克隆它。通过传递true给cloneNode我们还确保我们克隆li. 然后，我们需要做的就是使用普通的 JavaScript 来根据自己的喜好更改标题和内容，然后再将元素添加到列表的末尾。

如您所见，我们的 JavaScript 中没有 HTML 代码，这使得 JavaScript 更易于使用。它还可以防止任何潜在的错误使用innerHTML或只是在 HTML 中输入不正确的内容。

结论

虽然每个人都在谈论前端框架，但并不是每个人都在用它们构建网站。拥有像模板标签这样的工具可以更轻松地使用动态 JavaScript，这是对您的工具带的一个很好的补充，也是您将来肯定需要的东西。