JavaScript by Example

HTML templates

An HTML template is a simple <template> tag, which we can add in our DOM. However, even if we add it in our HTML, the contents of the <template> element will not get rendered. If it contains any external resources, such as images, CSS, and JS files, they will also not get loaded into our application. 

Hence, the template element only holds some HTML content, which can be used later by JavaScript. For example, say you have the following template element:

<template id="image-template">  <div>    <h2>Javascript</h2>    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4621/javascript.png" alt="js-logo" style="height: 50px; width: 50px;">  </div></template>

This element holds div that will not be rendered by the browser. However, ...