Tag HTML <template>

❮ Précédent Suivant ❯

L’élément <template> est utilisé pour stocker des modèles de code HTML pouvant être clonés et collés dans un document à l'aide de scripts. Généralement, il est utilisé pour les éléments avec une structure répétitive, comme les listes, les tableaux, etc.

La différence entre le tag <template> et les tags ordinaires réside dans le fait que son contenu est traité de manière particulière. Les fragments de code sont stockés du côté client et ne sont pas affichés lors du chargement de la page. Pour activer le contenu du tag et l'insérer dans le code du document, on doit utiliser des scripts.

Le navigateur traite le contenu du tag, pour s’assurer que le code est valide.

Le tag <template> peut être situé n'importe où dans le document HTML, dans les tags <head>, <body> ou <frameset>, et peut contenir le contenu autorisé dans ces tags.

Syntaxe

Le tag <template> est apparié; le contenu est écrit entre le tag ouvrant (<template>) et le tag fermant (</template>).

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <template id="myTemplate">
      <p>Contenu du template</p>
    </template>
    <div id="normalContent">
      <p>Le premier paragraphe</p>
    </div>
    <!-- La fonction JavaScript clone le modèle et l'ajoute au document. -->
    <button onclick="useTemplate();">Afficher le contenu</button>
    <script>
      function useTemplate() {
      var myTemplate = document.getElementById('myTemplate');
          normalContent = document.getElementById('normalContent');
          clonedTemplate = myTemplate.content.cloneNode(true);
          normalContent.appendChild(clonedTemplate);
          }
    </script>
  </body>
</html>