HTML template is a mechanism to hold the client-side content but it’s not rendered during page loading until it’s forcefully instantiated from the JavaScript.
Let’s say, we are going to create html and js files to understand the HTML 5 template feature. To do this exercise, we are using VS Code or you can use any HTML editor available in the market now. For now, just we are going to build a background for a HTML file.
Step 1: We have created a html file called index.html
index.html | to define the template
<template id="tmplId" >
Template in HTML 5
<div id="firstdivId">
</div>
</template>
Here, we have defined a template tag in which div tag is declared to set the background color.
Step 2: Run this index.html file to see the output. You will not see any output, because template will not be visible by default. We need to write JS to instantiate the template.
Step 3: We have created a JS file called index.js or you can write the script in the same HTML file.
index.js | to push the template into the main DOM
function loadTmplBody(){
var tmpl = document.querySelector("#tmplId");
tmpl.content.querySelector("#firstdivId").style = "width:100%; height:800px;background: linear-gradient(to bottom right, #ffffff 0%, #003366 100%);";
var clonTmpl = tmpl.content.cloneNode(true);
document.body.appendChild(clonTmpl);
}
Here, we have declared a JS method called loadTmplBody where we have instantiated template. First, we got the template node by running querySekector using template Id i.e., tmplId. After that, we have made style for this template content. Then, we are cloning the template content and append into the main DOM by document.body.appendChild(clonTmpl).
Step 4: Now, we have updated the index.html file.
index.html | to call the JS function during onload
<script src="index.js"></script>
<body onload="loadTmplBody();">
<template id="tmplId" >
Template in HTML 5
<div id="firstdivId">
</div>
</template>
</body>
We have attached the JS file and set the JS method called loadTmplBody() during onload. So, at the time of page loading that method will be invoked and JS function will be used to activate the template.
Result
Please run the index.html file and you will get the following result with good background screen in the browser.
Advantages of using template
By default, template content will not display until it’s instantiated through JavaScript, because it’s not attached with the main DOM until it’s externally pushed to the main DOM by JavaScript. So, at the time of page loading browser will detect the respective JS function to activate the template instead of loading the whole DOM in a single instance. Hence, browser performance has been improved using template.
Notes
Instead of calling the JavaScript method from during the page load, you can create one custom button and during onclick event you can call the respective JavaScript method to activate or instantiate the template.
8,073 total views, 3 views today