HTML <template> 标签
例子
使用<template>保存一些在页面加载时将被隐藏的内容。使用 JavaScript 显示它：
<button onclick="showContent()">显示隐藏内容</button>
<template>
<h2>花</h2>
<img src="img_white_flower.jpg" width="214" height="204">
</template>
<script>
函数显示内容（）{
让 temp = document.getElementsByTagName("模板")[0];
让 clon = temp.content.cloneNode(true);
文档.body.appendChild（克隆）；
}
</script>
亲自尝试 »
下面有更多“自己尝试”的示例。
定义和用法
这 <template> 标签用作容器来保存页面加载时对用户隐藏的一些 HTML 内容。
里面的内容 <template> 可以稍后使用 JavaScript 进行呈现。
您可以使用 <template> 如果您有一些 HTML 代码，想要反复使用，但除非您要求，否则不要使用标签。为此没有 这<template> 标签，您必须使用 JavaScript 创建 HTML 代码，以防止浏览器呈现代码。
浏览器支持
| 元素 | |||||
|---|---|---|---|---|---|
| <template> | 26.0 | 13.0 | 22.0 | 8.0 | 15.0 |
全局属性
这 <template> 标签支持HTML 中的全局属性.
更多示例
例子
用一个新的 div 元素填充网页，其中包含数组中的每个项目。每个 div 元素的 HTML 代码位于模板元素内：
<template>
<div class="myClass">我喜欢：</div>
</template>
<script>
让 myArr = ["奥迪", "宝马", "福特", "本田", "捷豹", "日产"];
函数显示内容（）{
让温度，项目，a，i；
temp = document.getElementsByTagName("模板")[0];
项目 = temp.content.querySelector("div");
对于（i = 0; i < myArr.length; i++）{
a = 文档.importNode（项目， true）;
a.textContent += myArr[i];
文档.body.appendChild(a);
}
}
</script>
亲自尝试 »
例子
检查浏览器支持情况<template> ：
<script>
如果（document.createElement（"模板"）。内容）{
document.write("您的浏览器支持模板！");
} 别的 {
document.write("您的浏览器不支持模板！");
}
</script>
亲自尝试 »
