Tag HTML <template>

Definizione e uso

<template> Tag come contenitore per nascondere alcune parti di HTML all'utente durante il caricamento della pagina.

<template> Il contenuto interno può essere visualizzato in un secondo momento utilizzando JavaScript.

Se hai some codice HTML che desideri riutilizzare ma che deve essere visualizzato solo quando necessario, puoi utilizzare <template> Tag. Senza <template> Tag, devi utilizzare JavaScript per creare codice HTML per prevenire che il browser lo visualizzi.

Esempio

Esempio 1

Usa <template> Per salvare alcuni contenuti che saranno nascosti durante il caricamento della pagina. E utilizza JavaScript per mostrarli:

<button onclick="showContent()">Show hidden content</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>

Prova da solo

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

Prova da solo

Esempio 3

Controlla il browser per <template> Supporto:

<script>
if (document.createElement("template").content) {
  document.write("Il tuo browser supporta il template!");
} else {
  document.write("Il tuo browser non supporta il template!");
}
</script>

Prova da solo

Proprietà globali

<template> Il tag supporta anche Proprietà globali di HTML.

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta per la prima volta l'attributo.

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