Powering Up HTML5 Templates: Easily create multiple instances of a template, each filled with unique data

In the last tip you’ve taught the basics of the HTML5 <template> element. It’s a reusable content template, dormant until JavaScript activates it.

But what if you want to create multiple instances of that template, each filled with unique data, like a list of products in an online store?

This involves looping through your data array, enabling dynamic updates to the template text before appending it to the page.

Let’s see a clear, beginner-friendly example using the <template> concept to show how this works.

Why Loop Through Data?

Suppose you’re building a simple e-commerce page.

You have a <template> for a product card, but you need to display multiple products—each with its own name, description, and price.

Hard-coding each card would be a nightmare, especially if the product list changes.

Instead, you can store product data in a JavaScript array, loop through it, and use the <template> to generate customized cards.

It’s like using a cookie cutter to make a bunch of cookies, but each one gets its own flavor.

Step-by-Step Example: Looping and Updating

Let’s create a practical example. Suppose you have an array of products, and you want to display each one using a template.

We can iterate over the array, update the cloned template, and append it to the page like this.

1. The HTML Setup

Start with a <template> for a product card and a container to hold the rendered cards:

(click on the image to open in a new tab)

A <template> sets the structure for every card, and we’ll dynamically replace its placeholder text.

Cards will be displayed inside the #product-container div.

2. The JavaScript: Data and Looping

Now, create an array of product objects and use JavaScript to loop through it, cloning and updating the template for each product:

(click on the image to open in a new tab)

What’s Happening Here?

Let’s break down the JavaScript:

• The Array: The products array holds objects, each with name, description, and price properties. This could come from a database or API in a real app.
• The Loop: The forEach method iterates over each product in the array.
• Cloning: For each product, we clone the template’s content using cloneNode(true) to get a fresh copy we can modify.
• Updating Text: We use querySelector to find elements in the cloned content (like .product-name) and update their textContent with the product’s data.
• Appending: Finally, we add the updated clone to the product-container div, where it renders on the page.

When this code runs, it generates three product cards, each displaying the name, description, and price of a different product.

Adding a new product is as simple as updating the products array. This method eliminates the need to copy, paste, and modify code and text.

JavaScript:

(click on the image to open in a new tab)

Result:

Here’s why this approach is so great.

This method is powerful because it’s scalable.

Got 100 products? The loop handles them all without extra HTML.

Need to update the card design? Update the <template> once to change every card.

It’s also a great introduction to dynamic web development, mimicking how modern frameworks like React or Vue handle lists of data.

NOTE: Make sure your class names (like .product-name) match exactly, or the querySelector won’t find them. You might find yourself baffled by a typo.

Wrapping Up

By combining HTML5 templates with JavaScript, you create flexible, maintainable code that’s perfect for dynamic content. Try this in your next project, and watch how easy it is to manage lists of data!

Although my blog doesn’t support comments, feel free to reply via email or X.