<template>

El elemento HTML <template> es un mecanismo para mantener el contenido del lado del cliente que no se renderiza cuando se carga una página, pero que posteriormente puede ser instanciado durante el tiempo de ejecución empleando JavaScript.

Imagina a la plantilla como un fragmento de contenido que está siendo almacenado para un uso posterior en el documento. Mientras el analizador procesa el contenido del elemento <template> durante la carga de la página, sólo lo hace para asegurar que esos contenidos son válidos; sin embargo, el contenido del elemento no se renderiza.

Atributos

Este elemento sólo incluye atributos globales.

Ejemplo

Primero empezamos con la parte HTML del ejemplo.

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

Lo primero, tenemos una tabla en la cual insertaremos más tarde contenido usando código JavaScript. Entonces viene el template, el cual describe la estructura de un fragmento HTML representando una tabla de una sola fila.

Ahora que la tabla ha sido creada y el template definido, usamos JavaScript para insertar filas en la tabla, con cada fila siendo construida usando el template como su 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.querySelector("tbody");
  var clone = document.importNode(t.content, true);
  tb.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.appendChild(clone2);

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

El resultado es la tabla HTML original HTML , con dos nuevas filas adjuntadas via JavaScript:

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

Especificaciones

Compatibilidad con navegadores

Ver también

• Web components: <slot>