随着 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,这是对您的工具带的一个很好的补充,也是您将来肯定需要的东西。