A common task is to use Javascript (and AJAX) to append new table row, table cell, list item, select option, fieldset legend. To accomplish this task exists two main approaches.
- Using hidden container:This method place the template’s content into a hidden container. The main pitfall of this way is that the browser fetch resources from the template, even the image (in case below) is have not been used yet.
<div style="display: none"> <img src="https://static.zinoui.com/img/logo.png"> </div>
- Using script tag:This approach use .innerHTML to inject the template content into the DOM. It would lead to possible XSS attacks.
<script type="text/template"> <img src="https://static.zinoui.com/img/logo.png"> </script>
That’s the place where the native
<template> could help.NATIVE TEMPLATES TO THE RESCUE
A method for declaring inert DOM subtrees in HTML and manipulating them to instantiate document fragments with identical contents. Part of the Web Components’ set of standards.
- where to define?
- The
<template>element can be placed into <head>, <body>, <frameset> and <colgroup> - what to contain?
- Metadata content – base, link, meta, noscript, script, style, template, title
- Flow content – Most elements that are used in the body of documents and applications are categorized as flow content: a, abbr, address, area, article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, data, datalist, del, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, i, iframe, img, input, ins, kbd, keygen, label, main, map, mark, math, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, sub, sup, svg, table, template, textarea, time, u, ul, var, video, wbr, text
- Any valid HTML content that is permitted to occur within the ol, ul, dl, figure, ruby, object, video, audio, table, colgroup, thead, tbody, tfoot, tr, fieldset, select
Actually the template’s content is not part of DOM until is used, e.g. styles will not apply, scripts will not run, HTML will not render, images will not download.
USING TEMPLATES
In order to use a template, first you need to clone it, then insert it into the DOM.
- HTML Markup
<template> <li> <a href=""></a> </li> </template> <ul></ul>
- Javascript
// Clone the fragment var template = document.querySelector('template'); var item = document.importNode(template.content, true); // Change the fragment var a = item.querySelector('a'); a.textContent = 'Test link'; a.href = 'https://www.example.com'; // Insert the fragment into the DOM document.querySelector('ul').appendChild(item);
BROWSER SUPPORT
Chrome 26+, Firefox 22+, Safari 7.1+, Opera 15+. For old browsers try polyfills like this JSFiddle.
CONCLUSION
The new HTML5 template element looks very promising and has a bright future since it solves the problems with current template approaches. Our working demo demonstrates use of template tag with live example.