The `<template>` tag is an HTML5 tag that is used to declare HTML templates. It is a useful feature that allows developers to define blocks of HTML that can be reused throughout a web application.
The `<template>` tag is unique because it does not display any content on the page by default. Instead, it allows you to define a block of HTML that can be cloned and inserted into the DOM at a later time. This can be very useful for creating reusable components, or for rendering dynamic content.
Here’s an example of how to use the `<template>` tag:
<template id=”myTemplate”>
<div class=”item”>
<h2>Title</h2>
<p>Description</p>
</div>
</template>
In this example, we’ve defined a simple HTML template that includes a `<div>` element with a class of “item”, and an `<h2>` and `<p>` element inside it.
To use this template, we can use JavaScript to clone it and insert it into the DOM:
const template = document.querySelector(‘#myTemplate’);
const clone = document.importNode(template.content, true);
document.body.appendChild(clone);
In this example, we’re using the `document.importNode()` method to clone the content of the template, and the `appendChild()` method to insert the clone into the body of the document.
Note that we’ve set the second argument of `document.importNode()` to `true`, which tells the method to clone all child elements and text nodes as well.
The `<template>` tag can also include JavaScript, allowing you to create more dynamic templates. Here’s an example:
<template id=”myTemplate”>
<div class=”item”>
<h2>{{title}}</h2>
<p>{{description}}</p>
<button onclick=”{{action}}”>Click me</button>
</div>
<script>
const button = document.querySelector(‘button’);
button.addEventListener(‘click’, () => {
alert(‘{{alert}}’);
});
</script>
</template>
In this example, we’re using curly braces `{{}}` to include placeholders for dynamic data. We’re also including a JavaScript event listener that will display an alert message when the button is clicked.
To use this template with dynamic data, we can create an object that includes the values for the placeholders:
const data = {
title: ‘My title’,
description: ‘My description’,
action: ‘console.log(“Button clicked!”)’,
alert: ‘Hello world!’
};
Then, we can use JavaScript to replace the placeholders with the data:
const template = document.querySelector(‘#myTemplate’);
const clone = document.importNode(template.content, true);
const h2 = clone.querySelector(‘h2’);
h2.textContent = data.title;
const p = clone.querySelector(‘p’);
p.textContent = data.description;
const button = clone.querySelector(‘button’);
button.setAttribute(‘onclick’, data.action);
template.content.querySelector(‘script’).textContent = template.content.querySelector(‘script’).textContent.replace(/{{alert}}/g, data.alert);
document.body.appendChild(clone);
In this example, we’re using the `querySelector()` method to select the elements that include placeholders, and the `textContent` and `setAttribute()` methods to replace the placeholders with the data.
Finally, we’re using the `replace()` method to replace the `{{alert}}` placeholder in the JavaScript code with the actual alert message.
That’s a basic tutorial on the `<template>` tag. Hopefully you can see how it can be a powerful tool for creating reusable components and rendering dynamic content in your web applications.
