将 template 用于 JavaScript 渲染
结合模板与 JavaScript 循环生成动态列表
将 template 用于 JavaScript 渲染 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。
template 元素
<template> 元素包含在被 JavaScript 克隆并插入之前不会渲染的 HTML。其内容处于惰性状态——在 template 被激活之前，脚本不会运行，图像不会加载，样式也不会应用。
访问 template 内容
template 内容位于 template.content 中的 DocumentFragment 里。要使用它，请克隆该片段：const clone = template.content.cloneNode(true)。true 参数会执行深层克隆，包括所有后代节点。
渲染 template 实例
在插入之前自定义克隆内容：在克隆内容中进行查询、设置文本内容并添加事件监听器。然后将其追加到 DOM 中：container.appendChild(clone)。每次调用 cloneNode() 都会创建一个独立副本——修改一个副本不会影响其他副本。
const tmpl = document.getElementById("card-template");
function renderCard(data) {
const clone = tmpl.content.cloneNode(true);
clone.querySelector(".title").textContent = data.title;
clone.querySelector(".body").textContent = data.body;
container.appendChild(clone);
}从 template 渲染列表
将 template 与 Array.forEach 或 Array.map 结合来渲染列表：对于 data 中的每个项目，克隆 template、填入值，然后追加到列表容器中。这种模式类似于框架的做法，但只建立在标准 HTML 和 JavaScript 之上。
用于表格行的 template
定义一个包含 <tr> 和单元格的 <template>。针对每一行 data 进行克隆并填充。这样可以避免通过字符串拼接生成 HTML——由于设置的是 textContent 而不是 innerHTML，因此无需进行转义。
template 的激活是显式的
template 永远不会自动渲染。因此，您可以安全地存储需要按条件渲染的片段：仅在搜索返回空结果时显示“无结果” template，仅在网络失败时显示错误 template，在获取 data 期间显示加载骨架。
嵌套 template
一个 template 可以包含其他 template——嵌套 template 会在外层 template 的 DocumentFragment 中保持惰性状态。这支持类似组件的层级结构：外层 template 先进行克隆，然后根据需要激活内部 template。
template 中的作用域样式
template 的 <style> 标签中的样式不会应用于文档——在 template 被实例化且其内容移动到活动 DOM 之前，这些样式处于惰性状态。这样，template 就可以携带自己的样式，而不会污染页面。
template 与 innerHTML
innerHTML 解析是同步的 HTML 字符串处理过程——每次都会重新解析 HTML。template.cloneNode() 则复制已经解析的树。对于重复渲染相同结构的场景，克隆 template 更快，并且可以避免字符串拼接带来的 XSS 风险。
数据绑定的局限
template 元素没有内置的数据绑定功能——您必须手动查询并填充每个克隆副本。对于复杂的数据绑定需求，使用框架或库更合适。template 适用于无需框架开销的简单手动渲染模式。
浏览器支持
所有现代浏览器都支持 template 元素（IE11 仅提供部分支持）。对于需要支持 IE 的环境，可以在初始化时通过解析 template 内容来实现 polyfill。在现代项目中，直接使用 template，无需 polyfill。
知识检查
为什么在重复渲染时，template.content.cloneNode(true) 优于 innerHTML？
总结
template 元素包含惰性的、预先解析的 HTML 片段。克隆 template.content 会创建可手动进行数据绑定的独立实例。结合使用 textContent 赋值（不会产生 XSS），template 仅通过标准浏览器 API 就能实现类似框架的列表渲染、条件界面和可复用的 HTML 模式。
常见问题解答
「将 template 用于 JavaScript 渲染」课时是免费的吗？
是的 — 「将 template 用于 JavaScript 渲染」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。
「将 template 用于 JavaScript 渲染」这节课中我会学到什么？
结合模板与 JavaScript 循环生成动态列表 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「将 template 用于 JavaScript 渲染」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML Academy 课中编写并运行代码吗？
能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- template 元素：惰性内容
- 使用 cloneNode 克隆模板
- 将 template 用于 JavaScript 渲染
- 模板与 innerHTML 的安全性