Working with the 'template' tag in HTML5

Written by

Walter G.

Published on

May 09 2020

Modified on

June 20 2021

Filed under

html

Templates are reusable chunks of HTML that are ignored by the HTML rendering engine in the browser, so they will not appear in your web pages.

<template id='template1'>
	<h2>Title</h2>
	<p>Content</p>
</template>

The content inside of <template>'s can be accessed through JavaScript however. The alternative and traditional method of rendering such content normally involved tediously creating each element using the createElement() function.

let div = document.createElement('div');

let span = document.createElement('span');

span.innerHTML = 'hello world';

div.appendChild(span);

Depending on the amount of nesting that you need to create for your module, this can introduce a considerable amount of JavaScript into your projects.

This also makes designing HTML components a difficult task, as there is no clear visual representation of the layout.

This is why the <template> tag is such a useful element.

Accessing content innerHTML

Getting the template contents can be done through the innerHTML property directly on the template.

<div id='output'></div><template id='template1'>
	<h2>Title</h2>
	<p>Content</p>
</template>

function renderTemplate(){
	let temp = document.getElementById('template1');

	document.getElementById('output').innerHTML = temp.innerHTML;
}

The template itself has no real added features built in, aside from not being rendered by the browser. In order to get the most use out of this pattern, you will need to create some form of placeholders inside of the template in lieu of actual data.

Often times, developers will use handlebar style placeholders in the templates themselves, later replaced with actual values in the JavaScript code.

<template id='template1'>
	<h2>{{title}}</h2>
	<p>{{content}}</p>
</template>

function renderTemplate(){
	let temp = document.getElementById('template1');

	document.getElementById('output').innerHTML = temp.innerHTML.replace('{{title}}', 'Title').replace('{{content}}', 'Content');
	}

You can, of course, use any template style that makes sense to you. However, the handlebar style {} placeholders are a popular choice typically.

Cloning content

You can clone the template contents directly into a new DOM node and append it to your webpage as well. You can access the templates cloneNode() method through the content property.

function renderTemplate(){
	let temp = document.getElementById('template1');

	let el = temp.content.cloneNode(true);
	document.getElementById('output').appendChild(el);
}

Testing for browser support

Every modern browser has support for the <template> tag. However, not everyone is using the latest browsers, so you can test for browser support using the following code snippet.

if (document.createElement('template').content){
	// it works!
}
else{
	// no support
}

If indeed the browser does not support the <template> element, you have several options at your disposal. For one, you can simply use a regular <div> element set to hidden by default.

Comments

No messages posted yet

Add comment