HTML:
<template id="template-row">
<tr class="">
<td></td>
<td></td>
<td></td>
</tr>
</template>
Y repetir el template dentro de una tabla con el siguiente script:
<template id="template-row">
<tr class="">
<td></td>
<td></td>
<td></td>
</tr>
</template>
JAVASCRIPT:
var t = document.querySelector("#tabla tbody"),
row = document.getElementById("template-row");
var td = row.getElementsByTagName("td");
td[0].textContent = "1";
td[1].textContent = "Nombres";
td[2].textContent = "Apellidos";
t.appendChild(row.content.cloneNode(true));
El código anterior permite reutilizar el template dentro de una tabla en cualquier contexto. Este ejemplo fue la fila de una tabla, sin embargo podemos usarlo con listas, párrafos, imágenes o lo que se nos ocurra siguiendo algunas limitaciones.
var t = document.querySelector("#tabla tbody"),
row = document.getElementById("template-row");
var td = row.getElementsByTagName("td");
td[0].textContent = "1";
td[1].textContent = "Nombres";
td[2].textContent = "Apellidos";
t.appendChild(row.content.cloneNode(true));
Para tener en cuenta:
- El código dentro de
templateno es mostrado por el navegador. - El código dentro de
templateno es parte del documento, es decir quedocument.getElementById('#template-row');no tiene hijos. - Los templates son inactivos hasta que son usados, es decir, que las imágenes no se cargan, archivos multimedia no son reproducidos y scripts no son ejecutados.
Visto en Frontend.pe.
.