HTML <template> etikett

Definition och användning

<template> Etikett som används som behållare för att dölja vissa HTML-innehåll för användaren vid sidans laddning.

<template> Innehållet kan visas senare med JavaScript.

Om du har något HTML-kod som du vill använda flera gånger men endast visa vid behov, kan du använda <template> Etikett. Om det inte finns <template> Etikett, måste du använda JavaScript för att skapa HTML-kod för att förhindra att webbläsaren visar den.

Exempel

Exempel 1

Använd <template> För att spara något som ska vara dolt vid sidans laddning och visa det med JavaScript:

<button onclick="showContent()">Visa dolt innehåll</button>
<template>
  <h2>Blomma</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>

Prova själv

Exempel 2

Fyll webbsidan med en ny div-element för varje element i arrayen. HTML-koden för varje div-element finns i template-elementet:

<template>
  <div class="myClass">Jag gillar: </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");
  för (i = 0; i < myArr.length; i++) {
    a = document.importNode(item, true);
    a.textContent += myArr[i];
    document.body.appendChild(a);
  }
}
</script>

Prova själv

Exempel 3

Kontrollera webbläsarens stöd för <template> stöd:

<script>
if (document.createElement("template").content) {
  document.write("Din webbläsare stöder template!");
}
  document.write("Din webbläsare stöder inte template!");
}
</script>

Prova själv

Globala attribut

<template> Etiketterna stöder också Globala attribut i HTML.

Webbläsarstöd

Numren i tabellen anger den första webbläsaren som helt stöder egenskapen.

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