Modern web applications use DOM manipulation to dynamically change areas of the page or insert values. A typical example is a table of figures; the initial page could return HTML column headers then initialize an Ajax request which returns several data records. The data is then appended to the table — but how? The developer has two choices:
- Alternatively, you create an empty first row in the HTML page which is used as a template for all other rows. That should be easier to maintain, but you’ll need to remove it from the DOM or style it with display:none to ensure it doesn’t appear.
Neither solution is particularly elegant.
Fortunately, the W3C has introduced a new
template tag which provides a mechanism to define HTML markup fragments as prototypes. (Perhaps it will also appease those upset by the demise of the hgroup element!)
In essence, a template can be used to insert fragments of HTML code into your page, e.g.
<template id="mytablerow"> <tr> <td class="record"></td> <td></td> <td></td> </tr> </template>
template code can be defined almost anywhere — the
body or even a
- templates will not display
- templates are not considered to be part of the document, i.e. using document.getElementById(“mytablerow”) will not return child nodes
- templates are inactive until used, i.e. enclosed images will not download, media will not play, scripts will not run, etc.
To use a template, it must be cloned and inserted into the DOM. For example, assuming the following HTML:
<table id="mytable"> <thead> <tr> <td>ID</td> <td>name</td> <td>twitter</td> </tr> </thead> <tbody> <!-- rows to be appended here --> </tbody> </table> <!-- row template --> <template id="mytablerow"> <tr> <td class="record"></td> <td></td> <td></td> </tr> </template>
// fetch tbody and row template var t = document.querySelector("#mytable tbody"), row = document.getElementById("mytablerow"); // modify row data var td = row.getElementsByTagName("td"); td.textContent = "1"; td.textContent = "SitePoint"; td.textContent = "sitepointdotcom"; // clone row and insert into table t.appendChild(row.content.cloneNode(true));
The important question: can we use template tags?
Probably not just yet. It’s supported in the latest version of Chrome and Firefox nightlies. Opera will support the tag when it switches to Blink. No word from the IE and Safari teams yet, but a template shim has been demonstrated on JSfiddle should you wish to support all browsers.
Personally, I think the
template tag is a great idea. It’s simple and standardizes templating techniques for HTML5 developers.
Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.
Jump Start Git, 2nd Edition
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers