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

客官°小女子只卖身不卖艺 2023-10-01 17:20 13阅读 0赞

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

### 什么是＜template＞ 标签？ ###

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

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

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

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

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

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

### 如何在 JavaScript 中使用模板标签 ###

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

<ul id="list">
 <li>
 Item 1: 
 Content 1
 </li>
 <li>
 Item 2: 
 Content 2
 </li>
 </ul>
 <button id="add-item">Add Item</button>
 
 <template id="list-item-template">
 <li>
 Item: 
 Content
 </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 来根据自己的喜好更改标题和内容，然后再将元素添加到列表的末尾。

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16][]

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

### 结论 ###

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

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/6c4a24d222874acdbc921bb63b6ce5c3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_20,color_FFFFFF,t_70,g_se,x_16