HTML5 的 template 标签本身并不具备动态数据绑定或模板渲染的能力，它只是一个用于存放可复用 HTML 结构的“容器”，浏览器不会渲染其中的内容，直到你通过 JavaScript 将其内容提取并插入到 DOM 中。要实现模板渲染，需要结合 JavaScript 操作 template 标签中的内容。
1. template 标签的基本结构
template 标签定义了可重复使用的 HTML 片段。它位于 HTML 文档中，但其中的内容在页面加载时不会被渲染。
示例：
<template id="user-template"><div class="user-card">
<h3></h3>
<p>邮箱：</p>
</div>
</template>
这个模板不会出现在页面上，只有通过 JavaScript 实例化后才会显示。
立即学习“前端免费学习笔记（深入）”；
2. 使用 JavaScript 渲染模板
通过 document.getElementById 获取 template 元素，然后使用 content.cloneNode(true) 复制其内容，再填充数据并插入 DOM。
示例代码：
<script>
function renderUser(user) {
const template = document.getElementById('user-template');
const clone = template.content.cloneNode(true);
clone.querySelector('h3').textContent = user.name;
clone.querySelector('p').textContent = '邮箱：' + user.email;
document.body.appendChild(clone);
}
// 使用示例
renderUser({ name: '张三', email: 'zhangsan@example.com' });
renderUser({ name: '李四', email: 'lisi@example.com' });
</script>
每调用一次 renderUser，就会生成一个基于模板的新用户卡片。
3. 批量渲染与列表场景
适用于渲染用户列表、商品卡片等重复结构。
示例：从数组批量生成内容
const users = [{ name: 'Alice', email: 'alice@example.com' },
{ name: 'Bob', email: 'bob@example.com' }
];
users.forEach(renderUser);
这样可以高效地将数据映射为 DOM 节点，且结构清晰，易于维护。
4. 注意事项与最佳实践
- template 内部的脚本和图片默认不执行/加载，适合存放“静态结构”
- 必须使用 cloneNode(true) 深拷贝 content，否则多次插入会失败
- 推荐为每个 template 设置唯一 id，便于 JS 访问
- 可结合 CSS 类名进行样式管理，保持结构与样式的分离
基本上就这些。template 标签配合 JavaScript，能有效提升 HTML 结构的复用性和代码可读性，是原生实现轻量级模板渲染的好方式。
