HTML · Links and media

template

Holds inert markup that is not rendered until JavaScript clones it. Useful for reusable fragments.

htmlRunnable example html course

Syntax

<template>…</template>

Example

Try it

<template id="row">
  <li class="row">New item</li>
</template>
<ul id="list"></ul>
<script>
  const tpl = document.getElementById('row');
  document.getElementById('list').append(tpl.content.cloneNode(true));
</script>

Learn this in the course

Reference pages are the quick answer. The course explains the why, shows the full example and ends with a challenge.

Open the course

template

Example

More in this group

Learn this in the course