HTML <template> κείμενο

  • Επόμενη Σελίδα <td>
  • Προηγούμενη Σελίδα <textarea>

定义和用法

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

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

如果您有一些希望重复使用的 HTML 代码，但在需要时才显示出来，您可以使用 <template> 标签。如果没有 <template> 标签，您需要使用 JavaScript 创建 HTML 代码来防止浏览器呈现该代码。

实例

例子 1

使用 <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() {
  var temp = document.getElementsByTagName("template")[0];
  var clon = temp.content.cloneNode(true);
  document.body.appendChild(clon);
}
</script>

Προσπάθησε Διάθεση

例子 2

为数组中的每一项使用一个新的 div 元素填充网页。每个 div 元素的 HTML 代码都在 template 元素中：

<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>

Προσπάθησε Διάθεση

Παράδειγμα 3

Ελέγξτε την υποστήριξη του περιηγητή για <template> Υποστήριξη:

<script>
if (document.createElement("template").content) {
  document.write("Ο περιηγητής σας υποστηρίζει το template!");
}
  document.write("Ο περιηγητής σας δεν υποστηρίζει το template!");
}
</script>

Προσπάθησε Διάθεση

Γενικές Ιδιότητες

<template> Οι ετικέτες υποστηρίζουν επίσης Γενικές Ιδιότητες του HTML.

Υποστήριξη Περιηγητών

Τα αριθμήματα στην τύχη δείχνουν την έκδοση του πρώτου περιηγητή που υποστηρίζει αυτή την ιδιότητα.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
26.0 13.0 22.0 8.0 15.0
  • Επόμενη Σελίδα <td>
  • Προηγούμενη Σελίδα <textarea>