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

	</body>
</html>

Output -

Content body.