La balise HTML <template>
La balise <template> stocke des fragments de code qui peuvent être clonés et réutilisés dans le document HTML. Voir des exemples.
La balise <template> contient du balisage HTML que vous souhaitez réutiliser, mais pas afficher lors du chargement de la page. Le navigateur analyse ce balisage pour vérifier sa validité, puis le conserve en réserve comme un gabarit inerte. Vous clonez ce gabarit avec JavaScript chaque fois que vous avez besoin d'une copie dans la page active — un modèle courant pour générer des éléments de liste, des lignes de tableau ou des cartes répétés.
Cette page explique ce qui rend le contenu d'un template inerte, comment l'activer avec JavaScript (content, cloneNode, appendChild), et présente une boucle pratique qui construit de nombreux éléments à partir d'un seul template.
La balise <template> est un nouvel élément d'HTML5. Elle peut être placée n'importe où à l'intérieur de <head> ou de <body>, et peut contenir tout contenu autorisé par ces éléments.
Pourquoi le contenu d'un template est inerte
Tout ce qui se trouve à l'intérieur d'un <template> est analysé comme du HTML ordinaire, mais le navigateur le traite comme inerte jusqu'à ce que vous l'activiez. Cela signifie que :
- Il n'est pas rendu — rien à l'intérieur du template n'apparaît sur la page.
- Les balises
<script>à l'intérieur ne s'exécutent pas. - Les balises
<style>à l'intérieur ne sont pas appliquées. - Les ressources externes ne se chargent pas — les sources de
<img>,<video>et<audio>ne sont pas récupérées, donc un template contenant 100 images ne génère aucune requête réseau tant que vous ne l'utilisez pas. - Ses nœuds ne font pas partie de l'arbre principal du document. Appeler
document.getElementById()ouquerySelector()sur la page ne trouvera pas les éléments qui vivent à l'intérieur d'un template.
Cette inertie est précisément l'intérêt : vous pouvez livrer un morceau de balisage avec la page, qui reste peu coûteux et sans effets secondaires jusqu'au moment où vous en avez réellement besoin.
Syntaxe
La balise <template> fonctionne en paires. Le contenu est écrit entre les balises ouvrante (<template>) et fermante (</template>).
Exemple de la balise 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>Si vous ouvrez l'exemple ci-dessus, le second titre et la citation de Marilyn Monroe sont absents de la page — ils se trouvent à l'intérieur du <template>, qui est invisible et inerte au chargement. Rien n'est affiché tant que JavaScript ne clone pas le contenu dans le document actif.
Activation d'un template avec JavaScript
Pour utiliser le contenu d'un template, vous le lisez via la propriété content de l'élément, vous le clonez, puis vous insérez le clone dans la page. Voici le modèle canonique, détaillé ci-dessous :
<!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>Lorsque le bouton est cliqué, la fonction useTemplate() s'exécute. Voici ce que fait chaque ligne :
myTemplate.contentrenvoie leDocumentFragmentdu template — un conteneur léger, hors du document, contenant les nœuds enfants du template. Vous n'insérez jamais ce fragment directement, car cela viderait le template d'origine ; vous le clonez plutôt..cloneNode(true)effectue un clone profond du fragment. L'argumenttruesignifie « cloner ce nœud et tous ses descendants ». Avecfalse, vous ne copieriez que le fragment vide et perdriez le<p>à l'intérieur, c'est pourquoi pour les templates vous passez presque toujourstrue.normalContent.appendChild(clonedTemplate)insère les nœuds clonés dans le DOM actif, après le premier paragraphe existant. Comme c'est une copie, le template reste intact et peut être réutilisé autant de fois que vous le souhaitez.
Pour en savoir plus sur ces méthodes, consultez JavaScript HTML DOM.
Cas d'usage : construction de contenu répété dans une boucle
La vraie puissance de <template> se révèle lorsque vous avez besoin de nombreux éléments similaires. Au lieu d'écrire chaque ligne à la main ou de construire du balisage par concaténation de chaînes, vous conservez un seul gabarit et le clonez pour chaque donnée :
<!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>Cela produit trois éléments <li>, un par fruit. La même approche s'adapte aux lignes de tableau, aux cartes de produits, ou à toute liste pilotée par des données — définissez le balisage une seule fois, clonez-le dans une boucle, et remplissez les parties dynamiques avant de les ajouter.
La balise <template> prend en charge les Attributs Globaux.