Utilizing Templates in HTML5

An Extract from HTML5 in easy steps, 2nd edition

– please note, colour references and some formatting features have not been included in this extract. For full colour specifications, see either print or digital copy.


HTML5 provides an interesting <template> element, which can be used to designate a group of elements that can be “cloned” by JavaScript. Typically, these elements will contain no data when designated as a template within the HTML document itself, but data can be dynamically inserted into the elements by a script.
This feature is useful to dynamically populate lists or tables:

template.html

Step 1
Start with the HTML5 document type declaration
<!DOCTYPE HTML>

Step 2
Add a root element containing head and body sections, with two script elements and a link to a style sheet
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<title>Template Example</title>
<script src=”data.js”></script>
<script src=”template.js”></script>
<link rel=”stylesheet” href=”template.css”>
</head>
<body> <!– Content to go here –> </body>
</html>

Step 3
Within the body section, insert a table that provides a template for its data row
<table>
<caption>High Performance Cars</caption>

<tr><th>Make<th>Model<th>BHP</tr>

<template id=”row”>
<tr><td><td><td></tr>
</template>

</table>

Step 4
Save the HTML document, then create a script that defines an associative array of data keys and values
var data = [
{ “make”:“Bugatti” , “model”:“Veyron” , “bhp”:“1200” } ,
{ “make”:“Lambo” , “model”:“Aventador” , “bhp”:“740” } ,
{ “make”:“Ferrari” , “model”:“Berlinetta” , “bhp”:“730” } ,
{ “make”:“Chevrolet” , “model”:“Camaro” , “bhp”:“650” } ,
{ “make”:“Pagani” , “model”:“Zonda” , “bhp”:“650” }
] ;

Step 5
Save the data script, then create a functional script to write the data values into the template row
function init( )

{
var template , i , car , clone , cells ;
template = document.querySelector( “#row” ) ;
for ( i = 0 ; i < data.length ; i++ )
{
car = data[ i ] ;
clone = template.content.cloneNode( true ) ;
cells = clone.querySelectorAll( “td” ) ;
cells[ 0 ].textContent = car.make ;
cells[ 1 ].textContent = car.model ;
cells[ 2 ].textContent = car.bhp ;
template.parentNode.appendChild( clone ) ;
}
}
document.addEventListener(“DOMContentLoaded”, init, false) ;

template.css

Step 6
Save the functional script, then create a style sheet with rules to specify the appearance of the table, and apply background color to alternate rows
table { font-family : sans-serif ; border : 1px solid black ; }
th { background : white ; }
tr:nth-child( odd ) { background : coral ; }
td { padding : 5px 50px ; }

Step 7
Save the style sheet, then open the HTML document in your web browser to see the table dynamically created

121-1[template]

 

 

 

Want to know more?

For the complete HTML5 guide, all in the trusted In Easy Steps style, click here. In full-colour and straightforward, jargon-free language, HTML5 in easy steps, 2nd edition instructs you how to employ the latest development for web page design with HyperText Markup Language (HTML5). This second edition is based upon the full W3C Recommendation of the HTML5.1 specification that was released on November 1, 2016. This means that ALL features of the latest specification are accurately included and fully demonstrated in this second edition.