{"id":2263,"date":"2019-12-30T16:11:47","date_gmt":"2019-12-30T15:11:47","guid":{"rendered":"https:\/\/www.codemotion.com\/magazine\/uncategorized\/content-and-templates-in-html\/"},"modified":"2020-12-16T16:20:27","modified_gmt":"2020-12-16T15:20:27","slug":"content-and-templates-in-html","status":"publish","type":"post","link":"https:\/\/www.codemotion.com\/magazine\/frontend\/web-developer\/content-and-templates-in-html\/","title":{"rendered":"Content and templates in HTML"},"content":{"rendered":"

Creating HTML templates<\/span> in the context of Web programming is a very common task on both the server<\/span> and client<\/span> sides. Traditionally, on the client<\/span> side, this task is assigned to libraries such as handlebars<\/a> or mustache<\/a> and similar. These libraries have defined a sort of standard in frontend programming. However, their internal behavior requires string interpolation<\/span>, DOM<\/span> building and rendering, and related work that can be avoided by adopting a native approach to templating.<\/p>\n

A few years ago, HTML specifications<\/a> introduced a native approach to creating templates<\/span> on the client<\/span> side based on the <template><\/em> element. However, this native approach seems not to be well known among frontend developers. Let\u2019s take a closer look to understand how to use this approach and the benefits it brings to the table.<\/p>\n

Detecting template support<\/strong><\/h2>\n

Although most recent browsers widely support<\/a> the <template><\/em> element, it is always good practice to check whether the browser<\/span> you are using supports it. The typical approach is to create an instance of the element via DOM<\/span> APIs<\/span> and check if the content property is available, as shown in the following code:<\/p>\n

if ('content' in document.createElement('template')) {
  \/\/...
}<\/pre>\n
If the <template><\/em> element is not supported, you can use your preferred templating library as a fallback.<\/p>\n
Declaring a template<\/strong><\/h2>\n
The <template><\/em> element allows us to declare a template, i.e., a structure of HTML tags<\/span> we will fill\u00a0 with actual values at runtime. Defining a template is very easy. All you have to do is add a <template><\/em> element in the head or body of your HTML page and include some HTML<\/span> in the starting and ending tags. The following is an example of template:<\/p>\n
<template id=\"bookDetailTemplate\">
  <li>
    <img src=\"\">
    <h5><\/h5>
    <p><\/p>
  <\/li>
<\/template><\/pre>\n
This example defines a list item as the template for the markup<\/span> that describes a book. The details of the book description consist of an image (<img><\/em>), a title (<h5><\/em>), and a text (<p><\/em>). Notice that an id<\/em> has been assigned to the template: bookDetailTemplate<\/em>. This id<\/em> is needed to identify the template when we use it at runtime.<\/p>\n
You can put the template element in the head section, or in the body of the HTML page – whichever is more convenient. In addition, the template element can contain any valid HTML markup<\/span>, including <style><\/em> and <script<\/span>><\/em> elements, and even the <template><\/em> element itself. However, the markup doesn\u2019t need to represent a complete and working item. For instance, the template we defined above is not a complete list, but simply a list item. Also, the image and the other elements inside the template are not defined. Their value will be assigned at runtime, when the template will become a living branch of the DOM tree<\/span>.<\/p>\n
The main feature<\/span> of the <template><\/em> element is its inertness<\/em>. In fact, its content is hidden until the template is activated. Any content inside it is not loaded, nor rendered, nor executed<\/span>. This means that any image contained in a template is not loaded, and no script<\/span> is executed<\/span> when the template\u2019s content is parsed. The browser<\/span> only checks the markup validity and creates a hidden DOM for it while the template is not in use. All of these elements become active only when the template is used. But how does that happen?<\/p>\n
Using a template<\/strong><\/h2>\n
Once a template is declared, you can use it with JavaScript<\/span> in a few simple steps. First of all, you need to access the <template><\/em> element through the classic getElementById()<\/em> method shown below:<\/p>\n
const bookDetailTemplate = document.getElementById(\"bookDetailTemplate\").content;<\/pre>\n
In this example, the internal content of the <template><\/em> element is actually identified by the bookDetailTemplate<\/em> id\u0010. The content<\/em> property provides the inert<\/em> DOM<\/span> structure generated by the markup<\/span> inside the <template><\/em> element.<\/p>\n
Once you have access to the template\u2019s content, you can manipulate its DOM<\/span> structure like any standard DOM<\/span>. For example, you can access the image in our template with the following code:<\/p>\n
const<\/span> img = bookDetailTemplate.querySelector(\"img\");
img.src = \"images\/myImage.jpg\";<\/pre>\n
However, none of this comes to life until the template\u2019s content is appended to the page\u2019s DOM<\/span>, as in the following example:<\/p>\n
const<\/span> bookList = document.getElementById(\"bookList\");
bookList.appendChild(bookDetailTemplate.cloneNode(true));<\/pre>\n
Looking at the code above, you\u2019reundoubtedly wondering why we have cloned the template\u2019s content before appending it to the DOM<\/span>. The answer is pretty simple; because you created a template, it’s very likely you would create multiple instances of DOM<\/span> portions from it. If, on the other hand, you don\u2019t clone the piece you are adding to the DOM<\/span>, your manipulations will affect all the other instances you\u2019ve already added. So this step is fundamental.<\/p>\n
To illustrate a complete example of template use at runtime, consider the following code:<\/p>\n
const<\/span> bookData = [
  {
    cover: \"...\",
    title: \"...\",
    text: \"...\"
  },  
  ...
];
const<\/span> bookDetailTemplate = document.getElementById(\"bookDetailTemplate\").content;
const<\/span> bookList = document.getElementById(\"bookList\");

for (let bookDetail of bookData) {
  const<\/span> img = bookDetailTemplate.querySelector(\"img\");
  img.src = bookDetail.cover;

  const<\/span> title = bookDetailTemplate.querySelector(\"h5\");
  title.innerText = bookDetail.title;

  const<\/span> text = bookDetailTemplate.querySelector(\"p\");
  text.innerHTML = bookDetail.text;

  bookList.appendChild(bookDetailTemplate.cloneNode(true));
}<\/pre>\n
In this example, we are mapping an array of objects, bookData<\/em>, to the DOM<\/span> by using the template declared before. Notice how we create an instance<\/span> of a list item for each object using the template.<\/p>\n
Summary<\/strong><\/h2>\n
As you\u2019ve seen in this article, creating and using an HTML<\/span> template via the native <template><\/em> element is straightforward. The declaration and use of the template are not so different from the approach suggested by most common templating libraries. However, the native <template><\/em> element provides you with a few benefits. It allows you to leverage the native templating engine supported by most recent browsers with noticeable performance gain. In addition, it frees users from third party library dependency.<\/p>\n