MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

<template>

This translation is incomplete. Please help translate this article from English.

Sumari

L'element HTML plantilla <template> és un mecanisme per mantenir el contingut del costat del client que no es renderizará quan es carregui una pàgina, però posteriorment es instanciará durant el temps d'execució mitjançant Javascript. 

Penseu en una plantilla com un fragment de contingut que s'emmagatzema per al seu ús posterior en el document. Mentre que l'analitzador fa processar el contingut de l'element <template> durant la càrrega de la pàgina, ho fa només per assegurar-se que aquests continguts són vàlids; No obstant això, el contingut de l'element no es representa.

Categories de contingut Contingut metadata, contingut dinàmic, contingut textual, element de suport script
Contingut permès Contingut metadata, contingut dinàmic, qualsevol contingut HTML vàlid que es permet que passi dins dels elements <ol>, <dl>, <figure>, <ruby>, <object>, <video>, <audio>, <table>, <colgroup>, <thead>, <tbody>, <tfoot>, <tr>, <fieldset>, <select>, <details> i <menu> l'atribut type és en l'estat de menú emergent
Omissió de l'etiqueta Cap, tant l'etiqueta inicial com l’etiqueta final són obligatòries
Elements pares permesos <body>, <frameset>, <head> and <colgroup> sense un atribut span
Interfície DOM HTMLTemplateElement

Atributs

Aquest element inclou els atributs globals.

També hi ha un atribut content, que és de només lectura i proporciona l'accés als continguts de la plantilla. L'existència de l'atribut content s'utilitza sovint com una manera de determinar si el navegador de l'usuari suporta l'element <template>.

Exemple

Primer començarem amb la part HTML de l'exemple.

<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> 

En primer lloc, tenim una taula en la qual més endavant inserirem el contingut mitjançant codi JavaScript. Després ve la plantilla, que descriu l'estructura d'un fragment d'HTML que representa una sola fila de la taula.

Ara que la taula s'ha creat i la plantilla definida, fem servir JavaScript per a inserir files a la taula, amb cada fila construïda usant la plantilla com a base.

// Test to see if the browser supports the HTML template element by checking
// for the presence of the template element's content attribute.
if ('content' in document.createElement('template')) {

  // Instantiate the table with the existing HTML tbody and the row with the template
  var t = document.querySelector('#productrow'),
  td = t.content.querySelectorAll("td");
  td[0].textContent = "1235646565";
  td[1].textContent = "Stuff";

  // Clone the new row and insert it into the table
  var tb = document.getElementsByTagName("tbody");
  var clone = document.importNode(t.content, true);
  tb[0].appendChild(clone);
  
  // Create a new row
  td[0].textContent = "0384928528";
  td[1].textContent = "Acme Kidney Beans";

  // Clone the new row and insert it into the table
  var clone2 = document.importNode(t.content, true);
  tb[0].appendChild(clone2);

} else {
  // Find another way to add the rows to the table because 
  // the HTML template element is not supported.
}

El resultat és la taula HTML original, amb dues noves files afegides a través de JavaScript:

Especificacions

Especificació Estat Comentari
WHATWG HTML Living Standard
The definition of 'template element' in that specification.
Living Standard Cap canvi
HTML5
The definition of 'template element' in that specification.
Recommendation Definició inicial

Navegadors compatibles

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Suport bàsic 26 22 (22) Edge 13 15 7.1
Característica Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Suport bàsic ? ? ? ? iOS 8

Veure

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,