HTML <template> etiketi

Tanım ve Kullanım

<template> etiketi, sayfa yüklenirken kullanıcıya gizlenmesi gereken bazı HTML içerikleri için kullanılır.

<template> içeriği, daha sonra JavaScript ile görüntülemek için kullanılır.

Eğer bazı HTML kodlarını tekrar kullanmak istiyorsanız, ancak ihtiyaç duyduğunuzda görüntülemek istiyorsanız: <template> etiketi yoksa <template> etiketi, tarayıcının bu kodu görüntülemesini önlemek için HTML kodunu JavaScript ile oluşturmanız gerekecek.

Örnek

Örnek 1

Kullanım: <template> Sayfa yüklenirken gizlenmesi gereken bazı içerikleri kaydetmek için kullanın ve JavaScript ile bu içeriği gösterin:

<button onclick="showContent()">Gizli içeriği göster</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>

Deneyimleyin

Örnek 2

数组 içindeki her bir madde için yeni bir div öğesi kullanarak web sayfasını doldurun. Her bir div öğesinin HTML kodu template öğesinde bulunmaktadır:

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

Deneyimleyin

Örnek 3

Tarayıcınızın <template> desteklenen:

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

Deneyimleyin

Genel Özellikler

<template> Bu etiketler ayrıca HTML'deki Genel Özellikler.

Tarayıcı Desteği

Tabloda belirtilen rakamlar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtmektedir.

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