HTML <template> Tag - HTML Tag

Definition and Usage

The <template> tag is used as a container to hold some HTML content hidden from the user when the page loads.

The content inside <template> can be rendered later with a JavaScript.

You can use the <template> tag if you have some HTML code you want to use over and over again, but not until you ask for it. To do this without the <template> tag, you have to create the HTML code with JavaScript to prevent the browser from rendering the code.

Browser Support

Global Attributes

The <template> tag supports the Global Attributes in HTML.

How to create HTML <template> Tag

Use <template> to hold some content that will be hidden when the page loads. Use JavaScript to display it:

index.html

Example: HTML

 <button onclick="showContent()">Show hidden content</button>

<template>
  <h2>Flower</h2>
  <img src="img_white_flower.jpg" width="214" height="204">
</template>

<script>
function showContent() {
  let temp = document.getElementsByTagName("template")[0];
  let clon = temp.content.cloneNode(true);
  document.body.appendChild(clon);
}
</script>

Output should be:

How to fill the web page with one new div element on HTML <template> Tag

Fill the web page with one new div element for each item in an array. The HTML code of each div element is inside the template element.

index.html

Example: HTML

 <template>
  <div class="myClass">I like: </div>
</template>

<script>
let myArr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"];
function showContent() {
  let temp, item, a, i;
  temp = document.getElementsByTagName("template")[0];
  item = temp.content.querySelector("div");
  for (i = 0; i < myArr.length; i++) {
    a = document.importNode(item, true);
    a.textContent += myArr[i];
    document.body.appendChild(a);
  }
}
</script>

Output should be:

How to check browser support for <template>

Test template Support

index.html

Example: HTML

<script>
if (document.createElement("template").content) {
  document.write("Your browser supports template!");
} else {
  document.write("Your browser does not supports template!");
}
</script>

Output should be:

html template

Type:	Develop
Category:	Web Tutorial
Sub Category:	HTML Tag
Uploaded by:	Admin

Read Article
https://develop.horje.com/learn/1434/reference