Please note, this is a STATIC archive of website developer.mozilla.org from November 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.
Vos résultats de recherche

    <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

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