5.1 标签 <template>
HTML中的<template>标签为开发者提供了一种定义HTML代码片段的方法，这些代码片段在页面加载时不会被显示，但可以稍后通过JavaScript使用。这对于动态创建和插入内容特别有用，比如列表元素、产品卡片等重复结构。
元素<template>用于存储不会立即显示在页面上的HTML代码。<template>中的内容在页面加载时不会被浏览器渲染，但可以通过DOM（Document Object Model）访问，并可以使用JavaScript克隆并插入到文档中。
语法：
HTML
<template>
<!-- 模板内容 -->
</template>
<template>标签的主要特点
- 隐藏内容：
<template>标签的内容在页面加载时不会显示。 - 使用JavaScript：
<template>标签的内容可以通过JavaScript克隆并插入到DOM中。 - 延迟加载：允许仅在需要时加载和显示内容，这可以提高页面的性能。
<template>标签的使用示例
在这个例子中，点击"Add Item"按钮时，会创建一个新的列表元素并添加到<ul>列表中。列表项的新模板在<template>标签内定义。
HTML
<button id="addButton">Add Item</button>
<ul id="itemList"></ul>
<template id="itemTemplate">
<li class="item">This is a new item</li>
</template>
JavaScript
// 获取将在DOM中使用的元素的引用
const addButton = document.getElementById('addButton'); // "添加"按钮
const itemList = document.getElementById('itemList'); // 将要添加元素的列表
const itemTemplate = document.getElementById('itemTemplate'); // 列表项模板
// 为"添加"按钮添加事件处理程序
addButton.addEventListener('click', () => {
// 克隆列表项模板的内容
const newItem = itemTemplate.content.cloneNode(true); // true表示深度克隆（包括所有子元素）
// 将新元素添加到列表中
itemList.appendChild(newItem);
});
5.2 示例：生成商品卡片
通过<template>和JavaScript，可以生成元素列表 - 商品卡片。
<template>标签的使用示例：
HTML
<h1>商品列表</h1>
<div id="productList"></div>
<template id="productTemplate">
<div class="item">
<h2 class="title"></h2>
<p class="description"></p>
<span class="price"></span>
</div>
</template>
JavaScript
// 在执行脚本前等待DOM完全加载
document.addEventListener('DOMContentLoaded', () => {
// 产品数据数组
const products = [
{ title: '商品 1', description: '商品 1 描述', price: '100 美元' },
{ title: '商品 2', description: '商品 2 描述', price: '200 美元' },
{ title: '商品 3', description: '商品 3 描述', price: '300 美元' },
];
// 获取DOM中的元素引用
const productList = document.getElementById('productList'); // 产品列表的容器
const template = document.getElementById('productTemplate').content; // 产品项模板
// 遍历产品数组，为每个产品在列表中创建一个元素
products.forEach(product => {
// 克隆产品模板
const clone = document.importNode(template, true); // true - 深度克隆
// 在克隆的模板中填充数据
clone.querySelector('.title').textContent = product.title;
clone.querySelector('.description').textContent = product.description;
clone.querySelector('.price').textContent = product.price;
// 将填充的模板添加到产品列表中
productList.appendChild(clone);
});
});
解释说明
- 标签
<template>：包含在加载页面时不显示的HTML代码。 - 方法
document.importNode(template, true)：克隆模板的内容。 - 方法
querySelector和textContent：用于在将克隆的模板插入文档之前修改其内容。
5.3 <template>标签的优势
性能提升
使用模板允许预加载以后将使用的HTML代码。这可以提高页面的性能，因为模板内容未被渲染且不影响页面的初始加载。
动态内容简化
模板简化了动态内容的创建。无需通过JavaScript编程方式创建HTML代码，只需克隆和修改预先准备好的模板即可。
方便性和可读性
模板使代码更具可读性和结构性，因为重复元素的HTML代码可以单独存储，而不是将其嵌入JavaScript中。
有条件内容显示示例：
HTML
<h1>操作结果</h1>
<div id="messageContainer"></div>
<template id="messageTemplate">
<div class="message">
<p class="content"></p>
</div>
</template>
JavaScript
document.addEventListener('DOMContentLoaded', () => {
// 获取DOM中的元素引用
const messageContainer = document.getElementById('messageContainer'); // 消息的容器
const template = document.getElementById('messageTemplate').content; // 消息模板
// 显示消息的函数
function showMessage(type, text) {
// 克隆消息模板
const clone = document.importNode(template, true); // true - 深度克隆
// 获取克隆中的消息元素
const messageDiv = clone.querySelector('.message');
// 添加与消息类型（success或error）对应的类
messageDiv.classList.add(type);
// 设置消息文本
messageDiv.querySelector('.content').textContent = text;
// 将消息添加到容器中
messageContainer.appendChild(clone);
}
// 调用函数以显示消息
showMessage('success', '操作成功！');
showMessage('error', '操作时出错。');
});
解释：
- 函数
showMessage()：接受消息的类型（成功或错误）和消息文本，克隆模板并将其添加到消息容器中。 - 类
.success和.error：根据消息类型应用于克隆的模板以进行样式化。
GO TO FULL VERSION