L'élément HTML <template> (ou Template Content ou modèle de contenu) est un mécanisme utilisé pour stocker du contenu côté client et qui ne doit pas être affiché lors du chargement de la page mais qui peut être instancié par la suite grâce à JavaScript.

Cet élément est un fragment de contenu mis de côté pour être utilisé par la suite dans le document. Lorsque le moteur traite le contenu de l'élément <template> lors du chargement de la page, il ne fait que vérifier la validité du contenu, ce dernier n'est pas affiché.

Catégories de contenu Contenu de méta-données, contenu de flux, contenu phrasé, élément destiné aux scripts.
Contenu autorisé Pas de restriction.
Omission de balises Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires
Parents autorisés <body>, <frameset>, <head>, <dl> et <colgroup> sans attribut span.
Rôles ARIA autorisés Aucun.
Interface DOM HTMLTemplateElement

Attributs

Cet élément inclut uniquement les attributs universels.

Exemples

HTML

<table id="producttable">
  <thead>
    <tr>
      <td>UPC_Code</td>
      <td>Product_Name</td>
    </tr>
  </thead>
  <tbody>
    <!-- existing data could optionally be included here -->
  </tbody>
</table>

<template id="productrow">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template> 

Au début, on a un tableau HTML pour lequel on insèrera du contenu plus tard grâce à l'aide d'un script JavaScript. Ensuite, on a le template qui décrit la structure du fragment HTML représentant une ligne de tableau.

JavaScript

Avec le tableau créé et le template défini, on utilise JavaScript pour insérer des lignes dans le tableau dont chacune est construite à partir du template.

// On vérifie si le navigateur prend en charge
// l'élément HTML template en vérifiant la présence
// de l'attribut content pour l'élément template.
if ("content" in document.createElement("template")) {

  // On prépare une ligne pour le tableau 
  var t = document.querySelector("#productrow");

  // On clone la ligne et on l'insère dans le tableau
  var tb = document.querySelector("tbody");
  var clone = document.importNode(t.content, true);
  var td = clone.querySelectorAll("td");
  td[0].textContent = "1235646565";
  td[1].textContent = "Stuff";

  tb.appendChild(clone);
  
  // On fait de même pour une autre ligne
  var clone2 = document.importNode(t.content, true);
  td = clone2.querySelectorAll("td");
  td[0].textContent = "0384928528";
  td[1].textContent = "Acme Kidney Beans";

  // Puis on insère
  tb.appendChild(clone2);

} else {
  // Une autre méthode pour ajouter les lignes
  // car l'élément HTML n'est pas pris en charge.
}

Résultat

Le résultat correspond au tableau HTML original avec deux lignes supplémentaires qui ont été ajoutées grâce au code JavaScript :

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de 'template element' dans cette spécification.
Standard évolutif  
HTML5
La définition de 'template element' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 26Edge Support complet 13Firefox Support complet 22IE Aucun support NonOpera Support complet 15Safari Support complet 8WebView Android Support complet OuiChrome Android Support complet 26Edge Mobile Support complet OuiFirefox Android Support complet 22Opera Android ? Safari iOS Support complet 8Samsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, Mr21, Yopadd, P45QU10U, Fredchat, miam
Dernière mise à jour par : SphinxKnight,