HTML Template Tag Explained
Tags: html, javascript, webdev, beginners
Published: 2023-01-01 14:40:00

## 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:

```html
<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:

```js
// 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`:

```js
// 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)