Template HTML and JS

The HTML element is a mechanism for holding HTML that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using JavaScript.

Think of a template as a content fragment that is being stored for subsequent use in the document. While the parser does process the contents of the element while loading the page, it does so only to ensure that those contents are valid; the element's contents are not rendered, however.

Example

HTML

<template id="elementTemplate">
<h1>Title Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</template>

JS

var template = document.querySelector("#elementTemplate");
let content = template.content.cloneNode(true);
document.querySelector(".name__class").appendChild(content);