mozilla

<template>

Résumé

L'élément HTML <template> est un mécanisme permettant une approche de mise en forme à l’aide de modèles, mais côté client. On déclare ainsi des fragments de HTML (DOM) qui ne seront pas mis en forme lors du chargement de la page, mais qui pourront être copiés, complétés… puis insérés dans le document via JavaScript. Cet élément peut-être comparé à un élément de stockage de contenu HTML pouvant être réutilisé.

Le contenu de l’élément <template> est toutefois parsé pendant le chargement de la page afin d’assurer sa validité.

Attributs

Cet élément inclut les attributs globaux.

Il contient également un attribut content en lecture seule. Il met à disposition un accès au contenu du modèle. Cet attribut content est souvent utilisé pour tester la prise en charge par le navigateur de l’élément <template>.

Exemples

Tout d’abord nous commençons par la partie HTML de l’exemple avec un tableau et un modèle de ligne de tableau.

<table id="producttable">
 <thead>
  <tr>
   <td>Code_UPC</td>
   <td>Nom_du_produit</td>
   <td>Quantité</td>
   <td>Allée</td>
  </tr>
 </thead>
 <tbody>
  <!-- des données existantes peuvent être inclues ici de manière facultative -->
 </tbody>
</table>

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

Puis nous passons à la partie JavaScript de l’exemple, qui sera utilisée pour instancier le modèle HTML.

// Contrôle tout d’abord si le navigateur prend en charge l’élément HTML template, 
// en testant la présence d’un attribut nommé content.
if ('content' in document.createElement('template')) {
  // Instancie le tableau avec le contenu HTML tbody existant ainsi que la ligne contenant le modèle
  var tbl = document.querySelector("#producttable tbody"),
      prd = document.getElementById("productrow");
  // Création d’une nouvelle ligne
  var td = prd.content.querySelectorAll("td");
  td[0].textContent = "0384928527";
  td[1].textContent = "Acme Green Beans";
  td[2].textContent = "42";
  td[3].textContent = "11B";
  // Clone la nouvelle ligne et l’insère dans le tableau
  tbl.appendChild(prd.content.cloneNode(true));
  // Création d’une nouvelle ligne
  td[0].textContent = "0384928528";
  td[1].textContent = "Acme Kidney Beans";
  td[2].textContent = "31";
  td[3].textContent = "11B";
  // Clone la nouvelle ligne et l’insère dans le tableau
  tbl.appendChild(prd.content.cloneNode(true));
} else {
  // Trouver une autre solution pour ajouter la ligne dans la table car 
  // l’élément HTML template n’est pas supporté.
}

Le résultat est le tableau HTML original, mais avec deux nouvelles lignes ajoutées par le JavaScript.

Spécifications

Fait actuellement parti du brouillon de spécification, HTML Templates.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Prise en charge basique (Oui) (Oui) ? (Oui) ?
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Prise en charge basique ? ? ? ? ?

Voir également

Étiquettes et contributeurs liés au document

Contributeurs à cette page : Fredchat, SphinxKnight, riplay777, miam, Yopadd
Dernière mise à jour par : Yopadd,