码农教程 - 一技在手,衣食无忧! tools

HTML <template> 标签

❮上一节 完整的 HTML参考 下一节❯

示例

使用 <template> 来保存一些在页面加载时将隐藏的内容。使用 JavaScript 来显示它：

<button onclick="showContent()">Show hidden content</button>

<template>
  <h2>Flower</h2>
  <img src="img_white_flower.jpg" width="214" height="204">
</template>

<script>
function showContent() {
  let temp = document.getElementsByTagName("template")[0];
  let clon = temp.content.cloneNode(true);
  document.body.appendChild(clon);
}
</script>
亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

这个<template>标签用作容器，在页面加载时保存一些对用户隐藏的 HTML 内容。

里面的内容<template>可以稍后用 JavaScript 渲染。

您可以使用<template>如果您有一些 HTML 代码想要反复使用，但在您要求之前不要这样做。去做这个没有这个<template>标签，您必须使用 JavaScript 创建 HTML 代码，以防止浏览器渲染代码。

浏览器支持

Element
<template> 26.0 13.0 22.0 8.0 15.0

全局属性

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

更多示例

示例

对于数组中的每一项，使用一个新的 div 元素填充网页。每个 div 元素的 HTML 代码位于 template 元素内：

<template>
  <div class="myClass">I like: </div>
</template>

<script>
let myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"];
function showContent() {
  let 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>
亲自试一试 »

示例

检查浏览器对 <template> 的支持：

<script>
if (document.createElement("template").content) {
  document.write("Your browser supports template!");
} else {
  document.write("Your browser does not supports template!");
}
</script>
亲自试一试 »

❮上一节 完整的 HTML参考 下一节❯