La balise template pour du contenu réutilisable et dynamique

La balise template en HTML5 est un outil puissant souvent sous-estimé pour la création de contenu dynamique et la réutilisation efficace d’éléments HTML. Introduite avec HTML5, cette balise offre une manière élégante de stocker du contenu côté client, prêt à être cloné et affiché dynamiquement via JavaScript. Dans ce tutoriel, nous explorerons en détail ce que la balise <template> peut faire et comment elle peut être utilisée avec des exemples concrets.

Qu’est-ce que la balise template ?

La balise <template> est une balise HTML5 peu connue mais incroyablement utile. Elle permet de définir un modèle ou un patron pour un contenu sans que ce contenu soit rendu à l’écran. Placé à l’intérieur d’un <template>, le contenu est préservé dans le document mais n’est pas affiché.

Cela signifie que vous pouvez stocker du contenu HTML réutilisable sans qu’il apparaisse directement sur la page.

Avantages et utilisation de la balise template

Réutilisation de contenu : La balise <template> permet de définir du contenu HTML qui peut être cloné et réutilisé dynamiquement. Cela permet de maintenir une structure HTML propre tout en réduisant la duplication de code.
Optimisation des performances : En stockant le contenu dans une balise <template>, le navigateur n’a pas besoin de le rendre immédiatement, ce qui peut améliorer les performances de chargement de la page, en particulier pour les contenus complexes ou volumineux.
Manipulation facile via JavaScript : Avec JavaScript, vous pouvez cloner le contenu d’un <template> et l’insérer dynamiquement dans votre page, ce qui vous donne un contrôle total sur la façon dont le contenu est affiché et manipulé.

Syntaxe de base

La balise <template> est un élément HTML5 relativement récent qui offre un moyen puissant de stocker et de réutiliser des fragments de code HTML. Elle permet de séparer le code HTML statique du code JavaScript dynamique, ce qui rend le code plus propre, plus organisé et plus facile à maintenir.

<template id="monTemplate">
    <!-- Contenu à réutiliser -->
</template>

Fonctionnement de la balise template

La balise <template> sert de conteneur pour du code HTML qui n’est pas affiché par défaut dans la page. Son contenu est invisible pour le navigateur lors du chargement initial de la page. Cependant, il peut être instancié et inséré dans le DOM (Document Object Model) à l’aide de JavaScript.

Cas d’utilisation courants de la balise <template>

La balise <template> peut être utilisée dans divers cas, notamment :

Création de listes d’éléments dynamiques
Affichage de formulaires dynamiques
Insertion de contenu conditionnel
Gestion des composants réutilisables
Création de menus déroulants dynamiques
etc…

Exemples concrets

Exemple 1 : Création d’une liste dynamique

<template id="listeElement">
    <li></li>
</template>

<ul id="maListe"></ul>

<script>
    const template = document.getElementById('listeElement');
    const ul = document.getElementById('maListe');

    // Création de 5 éléments de liste
    for (let i = 1; i <= 3; i++) {
        const clone = template.content.cloneNode(true);
        clone.querySelector('li').textContent = `Élément ${i}`;
        ul.appendChild(clone);
    }
</script>

La balise <template> définit un modèle pour un élément de liste <li>. Ce contenu est stocké dans le document mais n'est pas rendu sur la page. La balise <ul id="maListe"> avec l'identifiant maListe servira de conteneur pour les éléments de liste générés dynamiquement.

const template = document.getElementById('listeElement'); : Cela récupère la référence du modèle défini dans la balise <template> en utilisant son identifiant listeElement.
const ul = document.getElementById('maListe'); : Cela récupère la référence de l'élément <ul> qui servira de conteneur pour les éléments de liste générés.
La boucle for est utilisée pour créer cinq éléments de liste numérotés de 1 à 5.
const clone = template.content.cloneNode(true); : Cela clone le contenu du modèle défini dans la balise <template>. Le paramètre true de cloneNode indique que le contenu doit être cloné en profondeur (c'est-à-dire que tous les descendants sont également clonés).
clone.querySelector('li').textContent = Élément ${i}; : Cela met à jour le texte de chaque élément <li> cloné avec le numéro d'itération actuel de la boucle.
ul.appendChild(clone); : Cela insère chaque élément <li> cloné dans le conteneur <ul>.

Ce code utilise la balise <template> en HTML5 pour définir un modèle d'élément de liste <li>. À l'aide de JavaScript, il récupère ce modèle et le clone cinq fois en y injectant des numéros de 1 à 5. Chaque clone est inséré dynamiquement dans une liste <ul> préexistante sur la page, permettant ainsi de générer une liste ordonnée avec des éléments numérotés sans avoir à répéter le code HTML pour chaque élément.

Exemple 2 : Affichage conditionnel de contenu

<template id="contenuConditionnel">
    <div>
        <h2></h2>
        <p></p>
    </div>
</template>

<div id="container"></div>

<script>
    const template = document.getElementById('contenuConditionnel');
    const container = document.getElementById('container');
    const data = [
        { titre: 'Article 1', contenu: 'Contenu de l\'article 1' },
        { titre: 'Article 2', contenu: 'Contenu de l\'article 2' },
        { titre: 'Article 3', contenu: 'Contenu de l\'article 3' }
    ];

    // Affiche uniquement les articles dont le titre commence par "Article 1"
    data.forEach(item => {
        if (item.titre.startsWith('Article 1')) {
            const clone = template.content.cloneNode(true);
            clone.querySelector('h2').textContent = item.titre;
            clone.querySelector('p').textContent = item.contenu;
            container.appendChild(clone);
        }
    });
</script>

La balise <template> HTML avec l'id contenuConditionnel contient la structure HTML de base pour un article, avec un titre <h2> et un paragraphe <p>. Ce contenu n'est pas affiché directement dans la page. Le conteneur <div> avec l'id container servira à afficher les articles générés dynamiquement par le script JavaScript.

Le script JavaScript utilise les éléments définis dans le premier paragraphe pour générer et afficher des articles dynamiquement.

Récupération des données : Le script récupère un tableau data contenant des objets représentant les articles. Chaque article a deux propriétés : titre et contenu.
Filtrage des articles : Le script utilise une boucle forEach pour parcourir le tableau data. A l'intérieur de la boucle, il vérifie si le titre de l'article actuel commence par Article 1. Si c'est le cas, il procède aux étapes suivantes.
Création d'un clone du template : Le script crée un clone du contenu du template HTML contenuConditionnel. Cela permet de créer un nouvel élément HTML avec la même structure que le template, mais sans l'afficher encore dans la page.
Remplissage du contenu du clone : Le script remplit le contenu du clone avec les informations de l'article actuel. Il utilise querySelector pour sélectionner les éléments <h2> et <p> du clone et définit leur textContent avec le titre et le contenu de l'article, respectivement.
Insertion du clone dans le conteneur : Enfin, le script insère le clone du template rempli dans le conteneur <div> avec l'id container. Cela permet d'afficher l'article généré dynamiquement dans la page.

La balise <template> en HTML5 est un outil polyvalent pour la réutilisation de contenu et la création dynamique d'éléments HTML. Que ce soit pour générer des listes dynamiques, afficher du contenu conditionnellement ou toute autre tâche nécessitant la création répétitive d'éléments HTML, la balise <template> offre une solution élégante et efficace. En l'incorporant dans vos projets, vous pouvez simplifier votre code, améliorer les performances et offrir une expérience utilisateur plus fluide.