<template>

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.

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:

table {
  background: #000;
}
table td {
  background: #fff;
}

Especificacions

Navegadors compatibles

Veure

• Components Web : <content>, <shadow>