<template> element

2022-10-25 / mgrubinger / 0 reactions

The <template> element is useful if you want to dynamically create markup based on a predefined “template” (great naming right there).

Example markup:

		<h3>any markup, really</h3>
		<!-- watch out for FOUT if you also load relevant styles -->
		<link rel="stylesheet" href="url-to-stylesheet.css">

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

👉 The first child of