Template en HTML

Marcado que el navegador parsea pero no renderiza, a la espera de ser clonado.

<table>
  <tbody id="rows"></tbody>
</table>

<template id="row-template">
  <tr>
    <th scope="row" class="sku"></th>
    <td class="name"></td>
    <td class="price"></td>
  </tr>
</template>

<script>
  const template = document.getElementById('row-template');
  const row = template.content.cloneNode(true);
  row.querySelector('.sku').textContent = 'TS-001';
  document.getElementById('rows').append(row);
</script>

Cómo funciona

Nada dentro de un <template> se renderiza, corre ni carga.
content es un fragmento de documento que clonas antes de insertar.
Es la forma honesta de tener el marcado de una fila en HTML y no en un string.

Palabras clave y builtins usados aquí

const
document

El intento, en números

Líneas: 18
Caracteres a escribir: 395
Tokens: 119
Ritmo de tres estrellas: 80 tpm

Al ritmo de tres estrellas de 80 tokens por minuto, este intento toma unos 89 segundos.

Escribe este fragmento

Paso 1 de 3 en Plantillas y componentes; paso 5 de 13 en HTML interactivo.

← Anterior Siguiente →