Tag HTML <template>

Definisi dan penggunaan

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

<template> Konten internal dapat digambarkan dengan JavaScript nanti.

Jika Anda memiliki kode HTML yang ingin digunakan kembali tetapi hanya ditampilkan saat diperlukan, Anda dapat menggunakan <template> Tag. Jika tidak ada <template> Tag, Anda harus membuat kode HTML dengan JavaScript untuk mencegah browser menampilkan kode ini.

Contoh

Contoh 1

Penggunaan <template> Untuk menyimpan beberapa konten yang akan disembunyikan saat halaman diMuat, dan tampilkan dengan JavaScript:

<button onclick="showContent()">Tampilkan konten 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>

Coba sendiri

Contoh 2

Isi halaman web dengan elemen div baru untuk setiap item dalam array. Kode HTML untuk setiap elemen div ada di 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>

Coba sendiri

Contoh 3

Periksa browser untuk <template> Dukungan:

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

Coba sendiri

Atribut global

<template> Tag ini juga mendukung Atribut global HTML.

Dukungan browser

Angka di tabel menunjukkan versi browser pertama yang mendukung atribut ini.

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