<template>

El elemento HTML <template> es un mecanismo para mantener el contenido HTML 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.

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

Categorías de Contenido Metadata content, flow content, phrasing content, script-supporting element
Contenido permitido Sin restricciones
Omisión de etiquetas None, both the starting and ending tag are mandatory.
Padres permitidos Cualquier elemento que acepte metadata content, phrasing content, o script-supporting elements. También se permiten como hijos de un elemento <colgroup> que no tenga un atributo span .
Implicit ARIA role No corresponding role
Permitted ARIA roles No role permitted
DOM interface HTMLTemplateElement

Atributos

Este elemento sólo incluye atributos globales.

SInembargo, HTMLTemplateElement tiene una propiedad  content, que es solo-lectura cuyo  DocumentFragment contiene el subárbol DOM que representa a la plantilla.

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>
    <!-- datos opcionales pueden incluirse aquí opcionalmente -->
  </tbody>
</table>

<template id="productrow">
  <tr>
    <td class="record"></td>
    <td></td>
  </tr>
</template> 

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

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.

// Comprobar si el navegador soporta el elemento HTML template element chequeando
// si tiene el atributo 'content'
if ('content' in document.createElement('template')) {

  // Instanciar la tabla con el tbody existente
  // y la fila con el template
  var t = document.querySelector('#productrow'),
  td = t.content.querySelectorAll("td");
  td[0].textContent = "1235646565";
  td[1].textContent = "Stuff";

  // Clonar la nueva fila e insertarla en la tabla
  var tb = document.querySelector("tbody");
  var clone = document.importNode(t.content, true);
  tb.appendChild(clone);
  
  // Crear una nueva fila
  td[0].textContent = "0384928528";
  td[1].textContent = "Acme Kidney Beans";

  // Clonar la nueva fila e insertarla en la tabla
  var clone2 = document.importNode(t.content, true);
  tb.appendChild(clone2);

} else {
  // Buscar otra manera de añadir filas a la tabla porque el 
  // elemento template no está soportado. 
}

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

Especificaciones

Especificación Estado Comentario
HTML Living Standard
La definición de 'template element' en esta especificación.
Living Standard
HTML5
La definición de 'template element' en esta especificación.
Recommendation Initial definition

Compatibilidad navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
templateChrome Soporte completo 26Edge Soporte completo 13Firefox Soporte completo 22IE Sin soporte NoOpera Soporte completo 15Safari Soporte completo 8WebView Android Soporte completo SiChrome Android Soporte completo 26Firefox Android Soporte completo 22Opera Android ? Safari iOS Soporte completo 8Samsung Internet Android Soporte completo 1.5

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibilidad desconocida  
Compatibilidad desconocida

Ver también