HTML <template> tag

Määritelmä ja käyttö

<template> Tunniste toimii konttorina, jotta voit piilottaa joitakin HTML-sisältöjä käyttäjältä sivun lataamisen yhteydessä.

<template> Sisältöä voidaan käyttää myöhemmin JavaScriptin avulla.

Jos sinulla on joitakin HTML-koodia, jota haluat käyttää uudelleen, mutta näyttää sitä vain tarvittaessa, voit käyttää <template> Tunniste. Jos ei ole <template> Tunniste, sinun on käytettävä JavaScriptiä HTML-koodin luomiseen estääksesi selaimen näyttämästä sitä.

Esimerkki

Esimerkki 1

Käytä <template> Tallenna joitakin sisältöjä, jotka piilotetaan sivun lataamisen yhteydessä. Näytä ne JavaScriptin avulla:

<button onclick="showContent()">Näytä piilotettu sisältö</button>
<template>
  <h2>Kukka</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>

Kokeile itse

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

Kokeile itse

Esimerkki 3

Tarkista selaimen tuki <template> tuen:

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

Kokeile itse

Globaalit attribuutit

<template> Tagit tukevat myös HTML:n globaalit attribuutit.

Selaimen tuki

Taulukossa olevat luvut osoittavat ensimmäisen täysin tukevan siihen ominaisuuden selaimen version.

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