HTML template Element Tutorial JavaScript Programming
Published : December 4, 2014Last Edited : November 24, 2025
Author : Adam Khoury
Learn how to use the HTML5 template element. The template element is used to clone HTML fragments using JavaScript, Ajax and JSON after the page has loaded. PHP and MySQL can be tapped into via Ajax requests, and JSON format data that reflects your database content can be returned to your application.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
.username{
color:#C33;
}
</style>
</head>
<body>
<template id="tmplt">
<h2></h2>
<p></p>
<hr>
</template>
<script>
var arr = [
{ name:'Susan', country:'USA', age:27 },
{ name:'John', country:'Canada', age:34 },
{ name:'Klaus', country:'Germany', age:23 },
{ name:'Peter', country:'Greece', age:29 }
];
var template = document.querySelector('#tmplt');
for (var i = 0; i < arr.length; i++) {
var user = arr;
var clone = template.content.cloneNode(true);
var h2 = clone.querySelectorAll('h2');
h2[0].className = "username";
h2[0].innerHTML = user.name;
var p = clone.querySelectorAll('p');
p[0].innerHTML = "Country: "+user.country+"<br>Age: "+user.age;
template.parentNode.appendChild(clone);
}
</script>
</body>
</html>