5.1 Tag <template>
Il tag <template> in HTML offre agli sviluppatori la possibilità di definire frammenti di codice HTML
che non verranno visualizzati al caricamento della pagina, ma possono essere utilizzati successivamente tramite JavaScript. Questo è particolarmente utile per
la creazione dinamica e l'inserimento di contenuti, come elementi di lista, schede di prodotti e altre strutture ripetitive.
L'elemento <template> viene utilizzato per conservare il codice HTML che non verrà visualizzato sulla pagina immediatamente.
Il contenuto all'interno di <template> non viene reso dal browser al caricamento della pagina, ma è accessibile tramite il DOM
(Document Object Model) e può essere clonato e inserito nel documento tramite JavaScript.
Sintassi:
<template>
<!-- Contenuto del template -->
</template>
Caratteristiche principali del tag <template>
- Nascosta del contenuto: il contenuto del tag
<template>non viene visualizzato sulla pagina al suo caricamento. - Uso di JavaScript: il contenuto del tag
<template>può essere clonato e inserito nel DOM tramite JavaScript. - Caricamento posticipato: consente di caricare e visualizzare il contenuto solo quando necessario, che può migliorare le prestazioni della pagina.
Esempio di utilizzo del tag <template>
In questo esempio, cliccando sul pulsante "Add Item" viene creato un nuovo elemento di lista, che viene aggiunto alla lista <ul>.
Il template per il nuovo elemento di lista è definito all'interno del tag <template>.
<button id="addButton">Add Item</button>
<ul id="itemList"></ul>
<template id="itemTemplate">
<li class="item">This is a new item</li>
</template>
// Otteniamo i riferimenti agli elementi nel DOM che utilizzeremo
const addButton = document.getElementById('addButton'); // Pulsante "Aggiungi"
const itemList = document.getElementById('itemList'); // Lista dove aggiungeremo gli elementi
const itemTemplate = document.getElementById('itemTemplate'); // Template dell'elemento di lista
// Aggiungiamo un gestore di eventi al pulsante "Aggiungi"
addButton.addEventListener('click', () => {
// Cloniamo il contenuto del template dell'elemento di lista
const newItem = itemTemplate.content.cloneNode(true); // true significa clonazione profonda (inclusi tutti gli elementi figli)
// Aggiungiamo il nuovo elemento nella lista
itemList.appendChild(newItem);
});
5.2 Esempio: generazione di schede prodotto
Con <template> e JavaScript è possibile, ad esempio, generare un elenco di elementi — schede prodotto.
Esempio di utilizzo del tag <template>:
<h1>Lista dei prodotti</h1>
<div id="productList"></div>
<template id="productTemplate">
<div class="item">
<h2 class="title"></h2>
<p class="description"></p>
<span class="price"></span>
</div>
</template>
// Aspettiamo il completo caricamento del DOM prima di eseguire lo script
document.addEventListener('DOMContentLoaded', () => {
// Array di dati sui prodotti
const products = [
{ title: 'Prodotto 1', description: 'Descrizione prodotto 1', price: '100 dollari' },
{ title: 'Prodotto 2', description: 'Descrizione prodotto 2', price: '200 dollari' },
{ title: 'Prodotto 3', description: 'Descrizione prodotto 3', price: '300 dollari' },
];
// Otteniamo i riferimenti agli elementi nel DOM
const productList = document.getElementById('productList'); // Contenitore per la lista dei prodotti
const template = document.getElementById('productTemplate').content; // Template dell'elemento prodotto
// Iteriamo attraverso l'array dei prodotti e per ciascuno creiamo un elemento nella lista
products.forEach(product => {
// Cloniamo il template del prodotto
const clone = document.importNode(template, true); // true - clonazione profonda
// Compiliamo i dati nel template clonato
clone.querySelector('.title').textContent = product.title;
clone.querySelector('.description').textContent = product.description;
clone.querySelector('.price').textContent = product.price;
// Aggiungiamo il template compilato alla lista dei prodotti
productList.appendChild(clone);
});
});
Spiegazione
- Il tag
<template>: contiene il codice HTML che non viene visualizzato sulla pagina al caricamento. - Il metodo
document.importNode(template, true): clona il contenuto del template. - I metodi
querySelectoretextContent: vengono utilizzati per modificare il contenuto del template clonato prima di inserirlo nel documento.
5.3 Vantaggi del tag <template>
Miglioramento delle prestazioni
L'uso dei template consente di precaricare il codice HTML che verrà utilizzato successivamente. Questo può migliorare le prestazioni della pagina, poiché il contenuto dei template non viene reso e non influisce sul caricamento iniziale della pagina.
Semplificazione del contenuto dinamico
I template semplificano la creazione di contenuti dinamici. Invece di creare il codice HTML programmaticamente con JavaScript, puoi semplicemente clonare e modificare i template pre-preparati.
Praticità e leggibilità
I template rendono il codice più leggibile e strutturato, poiché il codice HTML per gli elementi ripetuti può essere conservato separatamente, invece di inserirlo nel JavaScript.
Esempio con visualizzazione condizionale del contenuto:
<h1>Risultati dell'operazione</h1>
<div id="messageContainer"></div>
<template id="messageTemplate">
<div class="message">
<p class="content"></p>
</div>
</template>
document.addEventListener('DOMContentLoaded', () => {
// Otteniamo i riferimenti agli elementi nel DOM
const messageContainer = document.getElementById('messageContainer'); // Contenitore per i messaggi
const template = document.getElementById('messageTemplate').content; // Template del messaggio
// Funzione per visualizzare un messaggio
function showMessage(type, text) {
// Cloniamo il template del messaggio
const clone = document.importNode(template, true); // true - clonazione profonda
// Otteniamo il riferimento all'elemento del messaggio all'interno del clone
const messageDiv = clone.querySelector('.message');
// Aggiungiamo la classe corrispondente al tipo di messaggio (successo o errore)
messageDiv.classList.add(type);
// Impostiamo il testo del messaggio
messageDiv.querySelector('.content').textContent = text;
// Aggiungiamo il messaggio nel contenitore
messageContainer.appendChild(clone);
}
// Chiamiamo la funzione per visualizzare i messaggi
showMessage('success', 'Operazione completata con successo!');
showMessage('error', 'Si è verificato un errore durante l\'operazione.');
});
Spiegazione:
- La funzione
showMessage(): accetta il tipo di messaggio (successo o errore) e il testo del messaggio, clona il template e lo aggiunge al contenitore dei messaggi. - I classi
.successe.error: vengono applicati al template clonato in base al tipo di messaggio per la stilizzazione.
GO TO FULL VERSION