HTML template Tag

HTML `<template>` Tag: Defining Template Content

The <template> tag in HTML is used to define a template that can be cloned and inserted into the document using JavaScript. It allows you to create content that is not rendered initially but can be activated later. This is particularly useful when working with dynamic content, such as in client-side rendering applications.

1. Basic Syntax

<template id="my-template">
  <div>
    <h2>Template Content</h2>
    <p>This content will be inserted dynamically later.</p>
  </div>
</template>

✅ The content inside the <template> tag is not rendered in the browser when the page loads. It is inactive until activated via JavaScript.

2. How It Works

The content inside the <template> tag is stored in the document and can be cloned when needed.
The the <template> element itself is not rendered, but you can access it and manipulate its contents using JavaScript.
This allows for dynamic insertion of HTML content, which is useful in building interactive websites or web applications.

3. Example Usage with JavaScript

You can use JavaScript to clone and insert the template content into the document when required.

Example: Cloning a Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML Template Example</title>
</head>
<body>
  <h1>Click the Button to Add Template Content</h1>

  <!-- Template -->
  <template id="my-template">
    <div class="dynamic-content">
      <h2>Template Content</h2>
      <p>This content was added dynamically using JavaScript!</p>
    </div>
  </template>

  <!-- Button to Add Content -->
  <button id="add-content-btn">Add Content</button>

  <!-- Container to Insert Content -->
  <div id="content-container"></div>

  <script>
    // Select the template and button elements
    const template = document.getElementById('my-template');
    const button = document.getElementById('add-content-btn');
    const container = document.getElementById('content-container');

    // Add event listener to the button
    button.addEventListener('click', () => {
      // Clone the content from the template
      const clone = document.importNode(template.content, true);

      // Append the cloned content to the container
      container.appendChild(clone);
    });
  </script>
</body>
</html>

Explanation:

The template content is defined inside the <template> tag but isn't rendered initially.
When the button is clicked, JavaScript clones the content of the template and appends it to the #content-container div.
The template content is dynamically added to the page.

4. Common Use Cases

Dynamic Content Generation: Insert HTML content dynamically in single-page applications (SPAs) without reloading the page.
Reusable UI Elements: Create reusable components (e.g., lists, cards) that can be cloned and inserted when needed.
Form Templates: Create form templates that can be cloned for user input.

5. Conclusion

The <template> tag defines inactive HTML content that can be dynamically inserted or cloned using JavaScript.
It is not rendered initially but can be used for dynamic content generation in web applications.
JavaScript is used to clone the template content and insert it into the document when needed.

Would you like an example of how to use the <template> tag for a more complex dynamic component or form? 😊

Souy Soeng

HTML template Tag