HTML Template Tag Explained

#html #javascript #webdev #beginners

What Is The Template Tag?

In HTML, the template tag is used to define a template for a web page or a portion of a web page. The content of the template tag is not rendered when the page is loaded, but it can be used as a blueprint for generating new DOM elements at runtime.

The template tag is often used in conjunction with JavaScript and the Document Object Model (DOM) to create dynamic, interactive web pages. For example, you might use the template tag to define a form that can be cloned and added to the page multiple times, or to create a list of items that can be filtered and sorted by the user.

Here is an example of the template tag in action:

<template id="item-template">
  <li class="item">
    <span class="item-name"></span>
    <button class="remove-button">Remove</button>
  </li>
</template>

In this example, the template tag defines an li element with a class of item and two child elements: a span with a class of item-name and a button with a class of remove-button. The template tag and its contents are NOT rendered when the page is loaded, but they can be used as a blueprint for creating new li elements at runtime.

How To Use The Template Tag In JavaScript?

To use the template tag in JavaScript, you can use the querySelector method to select the template element and then use the content property to access the contents of the template element. Here is an example of how you might use the template tag in JavaScript:

// Select the template element
let template = document.querySelector('#item-template');

// Access the contents of the template
let templateContent = template.content;

// Create a new DOM element using the template
let newItem = document.importNode(templateContent, true);

// Update the text of the new element
newItem.querySelector('.item-name').textContent = 'Item 1';

// Add the new element to the page
document.querySelector('#items').appendChild(newItem);

In this example, we use the querySelector method to select the template element with an id of item-template. We then use the content property to access the contents of the template element, which is a DocumentFragment object.

Next, we use the importNode method to create a new DOM element based on the template. Finally, we use the querySelector method to select the span element with a class of item-name and use the textContent property to update the text of the element. Finally, we use the appendChild method to add the new element to the page.

Browser Support

The template tag is supported in modern web browsers, including:

Google Chrome
Microsoft Edge
Mozilla Firefox
Apple Safari
Opera

However, it is worth noting that the template tag is not supported in Internet Explorer. If you need to support Internet Explorer, you can use a polyfill or a JavaScript library such as jQuery to provide equivalent functionality.

A polyfill is a piece of code that adds missing functionality to older browsers. You can use a polyfill to add support for the template tag to browsers that do not natively support it. There are several polyfills available for the template tag, such as the HTML5 template polyfill.

Alternatively, you can use a JavaScript library such as jQuery to create and manipulate DOM elements. jQuery provides a variety of methods for creating, inserting, and deleting elements, as well as for manipulating element attributes and styles.

Here is an example of how you might use jQuery to create a new DOM element based on a template:

// Define the template
let template = '<li class="item"><span class="item-name"></span><button class="remove-button">Remove</button></li>';

// Create a new DOM element using the template
let newItem = $(template);

// Update the text of the new element
newItem.find('.item-name').text('Item 1');

// Add the new element to the page
$('#items').append(newItem);

In this example, we use the $ function to create a new DOM element based on the template string. We then use the find method to select the span element with a class of item-name and use the text method to update the text of the element. Finally, we use the append method to add the new element to the page.

It is always a good idea to test your code in a variety of web browsers to ensure that it works as expected across different platforms.

Conclusion

In conclusion, the template tag in HTML allows you to define a template for a web page or a portion of a web page. The content of the template tag is not rendered when the page is loaded, but it can be used at runtime using JavaScript and the DOM. A tool like the template tag to make working with dynamic JavaScript easier is a great addition to your toolbelt and something you will surely need in the future.

If you want to know more about the template tag, then feel free to visit: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template

Top comments (4)

Technophile • Jan 1 '23

Hey, there! 👋

Great article! I guess it would be a good idea to add the browser support for this tag, and show how to deal with elements when template tag is not supported. Also, giving reference links (e.g. MDN Docs) can help readers to read more about it. 🙂