Template in HTML

Markup the browser parses but does not render, waiting to be cloned.

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

How it works

Nothing inside a <template> renders, runs, or loads.
content is a document fragment you clone before inserting.
It is the honest way to keep a row's markup in HTML rather than in a string.

Keywords and builtins used here

const
document

The run, in numbers

Lines: 18
Characters to type: 395
Tokens: 119
Three-star pace: 80 tpm

At the three-star pace of 80 tokens a minute, this run takes about 89 seconds.

Type this snippet

Step 1 of 3 in Templates & components, step 5 of 13 in Interactive HTML.

← Previous Next →