HTML/CSSAdvanced#html#javascript

What is the <template> element used for?

<template> holds inert HTML markup that isn't rendered or executed until explicitly cloned and inserted into the DOM via JavaScript, useful for reusable chunks like list item templates in dynamic UIs.

Example
<template id="row"><tr><td class="name"></td></tr></template>
<script>
const clone = document.getElementById('row').content.cloneNode(true);
document.querySelector('tbody').appendChild(clone);
</script>

Related Questions

1
HTML/CSSAdvanced#html#security

What is the difference between the <iframe> sandbox attribute values?

Open
2
HTML/CSSIntermediate#html#performance

How do you lazy-load images natively in HTML?

Open
3
HTML/CSSAdvanced#css#layout

What is the difference between a block formatting context (BFC) and normal flow?

Open