HTML <template> 标签

Definisi dan penggunaan

<template> Tag digunakan sebagai kontainer untuk menyembunyikan beberapa konten HTML kepada pengguna saat halaman dimuat.

<template> Konten dalam tag ini dapat dipresentasikan menggunakan JavaScript nanti.

Jika anda memiliki kode HTML yang ingin digunakan kembali tetapi hanya muncul saat diperlukan, anda dapat menggunakan <template> Tag. Jika tidak ada <template> Tag, anda perlu menggunakan JavaScript untuk membuat kode HTML untuk mencegah perepresentasian kode browser.

Contoh

Contoh 1

Gunakan <template> Untuk menyimpan beberapa kandungan yang akan disembunyikan saat halaman dimuat dan menunjuknya menggunakan JavaScript:

<button onclick="showContent()">Tunjuk kandungan tersembunyi</button>
<template>
  <h2>Bunga</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>

亲自试一试

Contoh 2

Mengisi setiap item dalam array dengan elemen div baru untuk halaman web. Kode HTML setiap elemen div ada dalam elemen template:

<template>
  <div class="myClass">Saya suka: </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("Your browser supports template!");
} else {
  document.write("Your browser does not supports template!");
}
</script>

亲自试一试

全局属性

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

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
26.0 13.0 22.0 8.0 15.0