<template>

Brouillon
Cette page n'est pas terminée.

Résumé

Cet é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é, complété,... puis inséré dans le document via JavaScript. Cet élément peut-être comparé à un élément de stockage de contenu HTML pouvant être réutilisé.

A noter que, malgré que cet élément n'est pas mis en forme au chargement, il est quand même parsé afin de garantir la validation de son contenu.

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 si le navigateur utilisé supporte 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>UPC_Code</td>
   <td>Product_Name</td>
   <td>Quantity</td>
   <td>Aisle</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>
</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 supporte 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");
  // Creation d'une nouvelle ligne
  var td = prd.getElementsByTagName("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'insert dans le tableau
  tbl.appendChild(prd.content.cloneNode(true));
  // Creation 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'insert 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 draft de spécification, HTML Templates.

Compatibilité des navigateurs

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

 

Voir également

Étiquettes et contributeurs liés au document

Contributeurs ayant participé à cette page : miam
Dernière mise à jour par : miam,