Tag HTML <template>
Il tag <template> conserva frammenti di codice da clonare e riutilizzare nel documento HTML più volte. Vedi esempi.
Il tag <template> contiene markup HTML che desideri riutilizzare, ma che non deve essere visualizzato al caricamento della pagina. Il browser analizza il markup per verificarne la validità, poi lo conserva come un progetto inerte. Con JavaScript puoi clonare quel progetto ogni volta che hai bisogno di una copia nella pagina attiva — un pattern comune per generare elementi di lista ripetuti, righe di tabella o card.
Questa pagina spiega perché il contenuto del template è inerte, come attivarlo con JavaScript (content, cloneNode, appendChild) e un ciclo pratico che costruisce molti elementi a partire da un singolo template.
Il tag <template> è un nuovo elemento in HTML5. Può essere posizionato ovunque all'interno di <head> o <body>, e può contenere qualsiasi contenuto consentito da questi elementi.
Perché il contenuto del template è inerte
Tutto ciò che si trova all'interno di un <template> viene analizzato come normale HTML, ma il browser lo tratta come inerte finché non viene attivato. Ciò significa che:
- Non viene visualizzato — nulla all'interno del template appare nella pagina.
- I tag
<script>al suo interno non vengono eseguiti. - I tag
<style>al suo interno non vengono applicati. - Le risorse esterne non vengono caricate — le sorgenti di
<img>,<video>e<audio>non vengono recuperate, quindi un template con 100 immagini non genera alcuna richiesta di rete finché non viene utilizzato. - I suoi nodi non fanno parte dell'albero del documento principale. Chiamando
document.getElementById()oquerySelector()sulla pagina non si trovano elementi che si trovano all'interno di un template.
Questa inerzia è il punto centrale: puoi includere un blocco di markup nella pagina che rimane economico e privo di effetti collaterali fino al momento in cui ne hai effettivamente bisogno.
Sintassi
Il tag <template> va in coppia. Il contenuto viene scritto tra i tag di apertura (<template>) e di chiusura (</template>).
Esempio del tag HTML <template>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is a heading.</h1>
<p>
<q>If you tell the truth, you don't have to remember anything.</q>
― Mark Twain
</p>
<template>
<h2>This is a second heading.</h2>
<p>
“I'm selfish, impatient and a little insecure. I make mistakes, I am out of control and at times hard to handle. But if you can't handle me at my worst, then you sure as hell don't deserve me at my best.”
― Marilyn Monroe
</p>
</template>
</body>
</html>Se apri l'esempio sopra, il secondo titolo e la citazione di Marilyn Monroe non compaiono da nessuna parte nella pagina — si trovano all'interno del <template>, che è invisibile e inerte al momento del caricamento. Nulla viene visualizzato finché JavaScript non clona il contenuto nel documento attivo.
Attivare un template con JavaScript
Per utilizzare il contenuto di un template, lo si legge tramite la proprietà content dell'elemento, lo si clona e si inserisce il clone nella pagina. Ecco il pattern canonico, illustrato passo per passo:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<template id="myTemplate">
<p>Template content</p>
</template>
<div id="normalContent">
<p>First paragraph</p>
</div>
<!-- JavaScript function clones the template and adds it to the document. -->
<button onclick="useTemplate();">Show content</button>
<script>
function useTemplate() {
const myTemplate = document.getElementById('myTemplate');
const normalContent = document.getElementById('normalContent');
const clonedTemplate = myTemplate.content.cloneNode(true);
normalContent.appendChild(clonedTemplate);
}
</script>
</body>
</html>Quando si fa clic sul pulsante, viene eseguita la funzione useTemplate(). Ecco cosa fa ogni riga:
myTemplate.contentrestituisce ilDocumentFragmentdel template — un contenitore leggero fuori dal documento che contiene i nodi figli del template. Non si inserisce mai questo fragment direttamente, perché farlo svuoterebbe il template originale; lo si clona invece..cloneNode(true)crea un clone profondo del fragment. L'argomentotruesignifica "clona questo nodo e tutti i suoi discendenti". Confalsesi copierebbe solo il fragment vuoto perdendo il<p>al suo interno, quindi per i template si passa quasi sempretrue.normalContent.appendChild(clonedTemplate)inserisce i nodi clonati nel DOM attivo, dopo il primo paragrafo esistente. Poiché è una copia, il template rimane intatto e può essere riutilizzato tutte le volte che si desidera.
Per ulteriori informazioni su questi metodi, consulta JavaScript HTML DOM.
Caso d'uso: costruire contenuto ripetuto in un ciclo
La vera potenza del <template> emerge quando è necessario creare molti elementi simili. Invece di scrivere ogni riga a mano o costruire markup con la concatenazione di stringhe, si mantiene un unico progetto e lo si clona per ogni dato:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<ul id="fruitList"></ul>
<template id="itemTemplate">
<li class="fruit"></li>
</template>
<script>
const fruits = ['Apple', 'Banana', 'Cherry'];
const list = document.getElementById('fruitList');
const template = document.getElementById('itemTemplate');
fruits.forEach(function (fruit) {
// Clone the template for each fruit.
const clone = template.content.cloneNode(true);
// Fill in the clone before inserting it.
clone.querySelector('.fruit').textContent = fruit;
list.appendChild(clone);
});
</script>
</body>
</html>Questo produce tre elementi <li>, uno per ogni frutto. Lo stesso approccio è scalabile per righe di tabella, card prodotto o qualsiasi lista guidata da dati — definisci il markup una volta, clonalo in un ciclo e compila le parti dinamiche prima di aggiungerlo.
Il tag <template> supporta gli Attributi Globali.