Hosting Solutions
mobile_logo Table of Contents


The <template> element is used to designate HTML that can be cloned and put into the page via JavaScript when the document loads. Note: This element is not yet compatible with Internet Explorer.

Code Example

<!doctype html> <html> <body> <template id="template1"> <h2></h2> <p></p> </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('#template1'); 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].innerHTML =; var p = clone.querySelectorAll('p'); p[0].innerHTML =; template.parentNode.appendChild(clone); } </script> </body> </html> open in code editor


globals - the global attributes common to all elements possible values: see global attribute list

Official Documentation



aabbraddressareaasidearticleaudiobbasebdobdiblockquotebodybrbuttoncanvascaptioncitecodecolcolgroupdatadatalistdddeldetailsdfndialogdivdldtemembedfieldsetfigcaptionfigurefooterformh1 h2 h3 h4 h5 h6headheaderhrhtmliiframeimginputinskbdkeygenlabellegendlilinkmainmapmarkmetameternavnoscriptobjectoloptgroupoptionoutputpparampreprogressqrb rp rt rtc rubyssampscriptsectionselectsmallsourcespanstrongstylesub supsummarytabletbodytdtemplatetextareatfootththeadtimetitletrtrackuulvarvideowbr