HTML template 模板元素
template标签：文档片段DocumentFragment、惰性渲染cloneNode、Web Components基础、与Vue template区别、slot插槽 · 难度：入门 · +10XP
HTML template 模板元素 —— 隐藏的HTML片段
做网页时经常需要重复生成相同的HTML结构——比如一个列表项、一张卡片、一行表格。<template> 标签就是用来存放这些模板的。它里面的内容不会显示在页面上，但可以随时用JS复制出来使用。
基本用法
<template id="cardTemplate">
<div class="card">
<h3 class="card-title"></h3>
<p class="card-text"></p>
</div>
</template>
<script>
const template = document.getElementById('cardTemplate');
const clone = template.content.cloneNode(true); // 深拷贝模板内容
clone.querySelector('.card-title').textContent = '标题1';
clone.querySelector('.card-text').textContent = '这是第一张卡片的内容。';
document.body.appendChild(clone);
</script>
关键步骤：获取模板 → cloneNode(true)深拷贝 → 修改内容 → 添加到页面。
template 的特性
| 特性 | 说明 |
|---|---|
| 内容不渲染 | template 里的图片不会加载、脚本不会执行、CSS不生效 |
| content 属性 | 通过 template.content 访问内部的 DocumentFragment |
| 可放在任意位置 | head、body 都可以 |
| 支持任何HTML | 可以包含 tr、td 等特殊元素（不像用div包裹tr会出错） |
实战：动态生成商品列表
<template id="productTemplate">
<tr>
<td class="prod-name"></td>
<td class="prod-price"></td>
</tr>
</template>
<script>
const products = [
{name: 'iPhone 15', price: '7999元'},
{name: 'MacBook Pro', price: '14999元'},
{name: 'AirPods Pro', price: '1999元'}
];
const template = document.getElementById('productTemplate');
products.forEach(product => {
const clone = template.content.cloneNode(true);
clone.querySelector('.prod-name').textContent = product.name;
clone.querySelector('.prod-price').textContent = product.price;
tbody.appendChild(clone);
});
</script>
动手练习
- 基础练习：用 template 生成一个学生名单表格——姓名、年龄、班级三列，至少5个学生，全部由JS从template复制生成。
- 进阶应用：做一个待办事项列表——输入框+添加按钮，每次点击从template克隆一个新的任务行添加到列表，包含任务内容、完成状态复选框、删除按钮。
- 项目实战：做一个照片墙——用 template 定义卡片样式（图片+标题+描述），从 JS 数组读取数据批量生成卡片。要求卡片至少8张，用CSS Grid排列。
接下来学什么？
下一课学习 HTML 嵌入元素——object、embed、iframe 的区别和使用场景。