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)
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. 🙂Hello, Thanks for the feedback. I added the link as well as browser support now.
ummm does it work without js?
Yes, It does work without js. However, Template tag is generally used with js to create dynamic contents.