HTML <template> 标签

<button onclick="showContent()">显示隐藏内容</button>
<template>
   <h2>花</h2>
 <img src="img_white_flower.jpg" width="214" height="204">
</template>

<script>
function showContent() {
  var temp = document.getElementsByTagName("template")[0];
  var clon = temp.content.cloneNode(true);
  document.body.appendChild(clon);
}
 </script> 

下面有更多实例。

定义和用法

<template> 标记用作容纳页面加载时对用户隐藏的 HTML 内容的容器。

<template> 中的内容可以稍后使用 JavaScript 呈现。

如果您有一些需要重复使用的 HTML 代码，则可以使用 <template> 标记。如果在没有 <template> 标记的情况下执行此操作，必须使用 JavaScript 创建 HTML 代码，以防止浏览器呈现这些代码。

浏览器支持

全局属性

<template> 标签支持 HTML 中的全局属性。

更多实例

 <template>
 <div class="myClass">I like:</div>
</template>
  
<script>
var myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar",   "Nissan"];
function showContent() {
  var temp, item, a,   i;
  temp =   document.getElementsByTagName("template")[0];
  item =   temp.content.querySelector("div");
    for (i = 0; i< myArr.length; i++) {
    a = document.importNode(item,   true);
    a.textContent += myArr[i];
      document.body.appendChild(a);
  }
}
</script>

<script>
if (document.createElement("template").content) {
    document.write("您的浏览器支持模板！");
} else {
    document.write("您的浏览器不支持模板！");
}
</script>