HTML5中的template标签用于声明一段不会被浏览器立即渲染的HTML片段，常作为内容模板在需要时通过脚本复制并插入页面。它可以帮助我们将结构与逻辑分离，避免繁琐的字符串拼接。
template标签的基本特点
template标签内部的HTML内容处于非激活状态，其中的图片不会加载、脚本不会执行。只有通过JavaScript访问其content属性获取DocumentFragment，再进行克隆和使用，内容才会出现在页面中。
- 内容不显示：页面加载时template标签内代码不可见
- 不占用资源：内部媒体和脚本默认不运行
- 可复用：通过cloneNode实现多次插入
基础使用示例
下面演示如何利用template标签定义一个用户卡片模板，并通过JS动态添加多条数据。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>template示例</title>
</head>
<body>
<div id="container"></div>
<template id="user-card">
<div class="card">
<h3 class="name"></h3>
<p class="age"></p>
</div>
</template>
<script>
// 获取模板和内容挂载点
var tpl = document.getElementById('user-card');
var box = document.getElementById('container');
var users = [
{ name: '张三', age: 20 },
{ name: '李四', age: 25 }
];
users.forEach(function(u) {
// 克隆模板内容
var node = tpl.content.cloneNode(true);
node.querySelector('.name').textContent = u.name;
node.querySelector('.age').textContent = '年龄：' + u.age;
box.appendChild(node);
});
</script>
</body>
</html>
在表格中应用template
如果要在表格里批量插入行，也可以将
<table id="data-table" border="1">
<thead>
<tr><th>编号</th><th>名称</th></tr>
</thead>
<tbody></tbody>
</table>
<template id="row-tpl">
<tr>
<td class="id"></td>
<td class="nm"></td>
</tr>
</template>
<script>
var tpl = document.getElementById('row-tpl');
var tbody = document.querySelector('#data-table tbody');
var list = [{id:1, nm:'苹果'}, {id:2, nm:'香蕉'}];
list.forEach(function(item) {
var row = tpl.content.cloneNode(true);
row.querySelector('.id').textContent = item.id;
row.querySelector('.nm').textContent = item.nm;
tbody.appendChild(row);
});
</script>
注意事项
使用template标签时，要注意它自身的content属性返回的是DocumentFragment，必须cloneNode后才能插入，否则同一片段只能插入一次。另外在模板内部写HTML标签名称如<template>本身不会被解析为实际节点，仅作为文本存在于模板结构中。
template适合轻量级的客户端模板需求，若项目复杂建议结合前端框架的模板机制。
小结
通过HTML5的template标签，我们可以用原生方式优雅地实现内容模板，减少字符串拼接错误，让页面结构更清晰、逻辑更好维护。
HTML5template标签内容模板修改时间：2026-07-30 08:03:19