The <template> element is useful if you want to dynamically create markup based on a predefined “template” (great naming right there).
Example markup:
<template>
<div>
<h3>any markup, really</h3>
<!-- watch out for FOUT if you also load relevant styles -->
<link rel="stylesheet" href="url-to-stylesheet.css">
</div>
</template>
<div class="my-target"></div>
Example script
// grab the template
const template = document.getElementById('my-template');
// clone the templates content
const clonedTemplate = template.content.firstElementChild.cloneNode(true);
// optionally modify the cloned tree here
// append to `.my-target`
document.targetSelector('.my-target').appendChild(clonedTemplate);
👉 The first child of (the
) is not strictly necessary, but as the MDN article on states, certain events like click do not work if the templates content is cloned directly (template.content.cloneNode(true)) instead of firstElementChild.cloneNode(true).
date: '2022-10-25' short: ... for dynamic content
The
<template>element is useful if you want to dynamically create markup based on a predefined “template” (great naming right there).Example markup:
Example script