Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

template

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 = user.name; var p = clone.querySelectorAll('p'); p[0].innerHTML = user.country; template.parentNode.appendChild(clone); } </script> </body> </html> open in code editor

Attributes

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

Official Documentation

http://www.w3.org/TR/html/scripting-1.html#the-template-element

HTML

Elements

aabbraddressareaasidearticleaudiobbasebdobdiblockquotebodybrbuttoncanvascaptioncitecodecolcolgroupdatadatalistdddeldetailsdfndialogdivdldtemembedfieldsetfigcaptionfigurefooterformh1 h2 h3 h4 h5 h6headheaderhrhtmliiframeimginputinskbdkeygenlabellegendlilinkmainmapmarkmetameternavnoscriptobjectoloptgroupoptionoutputpparampreprogressqrb rp rt rtc rubyssampscriptsectionselectsmallsourcespanstrongstylesub supsummarytabletbodytdtemplatetextareatfootththeadtimetitletrtrackuulvarvideowbr