Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

HTML template Element Tutorial JavaScript Programming

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[i]; 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>
thumb

HTML Videos

Working with Elements

HTML template Element Tutorial JavaScript Programming