Il Tag <template> HTML

Definizione e Utilizzo

Il tag <template> viene utilizzato come contenitore per nascondere del contenuto HTML all’utente quando la pagina si carica. Il contenuto all’interno del tag <template> può essere renderizzato in seguito con JavaScript. Puoi utilizzare il tag <template> se hai del codice HTML che desideri utilizzare più volte, ma solo quando richiesto. Senza il tag <template>, dovresti creare il codice HTML con JavaScript per evitare che il browser lo renderizzi.

<button onclick="mostra()">Mostra contenuto nascosto</button>

<template>
  <h2>Casa</h2>
  <img src="immagine.jpg" width="214" height="204" />
</template>
<script>
  function mostra() {
    let temp = document.getElementsByTagName("template")[0];
    let clone = temp.content.cloneNode(true);
    document.body.appendChild(clone);
  }
</script>