Definition
The <template> HTML element is used as a container for holding HTML content that will not be rendered immediately when the page loads. It allows you to define reusable content or HTML fragments that can be cloned, modified, and inserted into the document dynamically using JavaScript.
Here’s an example of how to use the <template> element:
<template id="myTemplate">
<h1>Template Content</h1>
<p>This is a template that can be used to create dynamic content.</p>
</template>
In this example, the <template> element contains some HTML content, including a heading and a paragraph. The id attribute is used to uniquely identify the template, allowing it to be accessed and manipulated via JavaScript.
To use the template, you can clone it and insert it into the document when needed. Here’s an example of how to clone and insert the template content into the document:
const template = document.getElementById("myTemplate");
const clone = template.content.cloneNode(true);
document.body.appendChild(clone);
In this JavaScript code snippet, the getElementById() method is used to select the template based on its id. The content property of the template is then accessed to retrieve the actual content inside it. By using the cloneNode(true) method, a deep copy of the template content is created. Finally, the cloned content is appended to the <body> element of the document.
The <template> element provides a convenient way to define HTML fragments or content that can be used as a basis for creating dynamic content or repeating elements. It helps separate the structure of the content from its presentation and allows for more flexible and efficient rendering of content using JavaScript.
It’s important to note that content inside a <template> element is not displayed by default. It remains hidden until explicitly cloned and inserted into the document using JavaScript.