HTML <template> 标签：定义可复用模板 - 详细介绍
标签是 HTML5 中新引入的一个标签，它用于定义可复用模板内容，但不会在页面中直接显示。模板内容可以在需要时通过 JavaScript 进行克隆、填充和显示。
标签的语法
<template>
<!-- 模板内容 -->
</template>
标签的使用场景
标签可以用于以下场景：
- 定义可复用的组件： 使用 标签定义组件模板，并通过 JavaScript 进行实例化和渲染。
- 动态生成内容： 使用 标签定义模板内容，并根据用户操作或数据变化进行动态渲染。
- 隐藏内容： 使用 标签隐藏一些不希望在页面中直接显示的内容，例如一些预加载的资源或数据。
标签的示例
<template id="user-template">
<div>
<h2>{{ name }}</h2>
<p>{{ email }}</p>
</div>
</template>
<button id="add-user">添加用户</button>
<div id="users"></div>
<script>
const userTemplate = document.getElementById("user-template").content;
const addUserButton = document.getElementById("add-user");
const usersContainer = document.getElementById("users");
addUserButton.addEventListener("click", () => {
const user = {
name: "John Doe",
email: "john.doe@example.com"
};
const userElement = userTemplate.cloneNode(true);
userElement.querySelector("h2").textContent = user.name;
userElement.querySelector("p").textContent = user.email;
usersContainer.appendChild(userElement);
});
</script>
在这个例子中，我们使用 标签定义了一个用户模板，并在用户点击添加按钮时，通过 JavaScript 克隆模板内容，填充数据并将其添加到页面中。
标签的注意事项
- 标签只能包含 HTML 内容，不能包含 JavaScript 代码。
- 标签中的内容不会被浏览器解析，只有在通过 JavaScript 克隆和填充后才能被显示。
- 标签本身不会被显示在页面中，它只是一个用来存放模板内容的容器。
总结
标签是 HTML5 中的一个强大工具，它可以帮助我们定义可复用模板内容，并通过 JavaScript 进行动态渲染，从而提高代码的可维护性和可复用性。
原文地址: https://www.cveoy.top/t/topic/p1de 著作权归作者所有。请勿转载和采集!