Summary -

In this topic, we described about the <template> tag along with detailed example.

To declare clone and inserted blocks with JavaScript. The <template> tag is used to declare cloned and inserted blocks with javascript. <template> allows to re-use that content over and over again.

The tag can be specified like <template></template> with the block inserted in between the opening and closing tags. The contents of the <template> will not be loaded on page load and inactive until used.

<template> tag can be placed anywhere in the HTML document. <template> tag will not considered as part of document until it is used.

Syntax -

<template>.... </template>

Example -

<!DOCTYPE html>
		<title> Template element example.. </title>
		function useTemplate() {
		var myTemplate = document.getElementById('myTemplate'),
		    normalContent = document.getElementById('normalContent'),
		    clonedTemplate = myTemplate.content.cloneNode(true);
		<!-- Template Content -->
		<template id="myTemplate">
			<p>Template content copied. Click again to add more...</p>
		<!-- Normal Content -->
		<div id="normalContent">
			<p>content body</p>
		<!-- JavaScript function: Clones the template and appends it to 
		the normal content -->
		<button onclick="useTemplate();">Click to Use Template!</button>


Output -

Content body.