Why should you care?

MarkupVerse product grids render rows from JSON catalog responses.

See it live — copy this example

Save as demo.html and open in your browser, or use Run Example below.

<section aria-labelledby="catalog-h">
  <h2 id="catalog-h">Plans</h2>
  <div id="grid" class="plan-grid"></div>
</section>
<template id="plan-row">
  <article class="plan-card"><h3></h3><p class="price"></p></article>
</template>
<script>
const plans = [{ name: 'Starter', price: '₹999/mo' }, { name: 'Scale', price: '₹4,999/mo' }];
const tpl = document.getElementById('plan-row');
plans.forEach(p => {
  const node = tpl.content.cloneNode(true);
  node.querySelector('h3').textContent = p.name;
  node.querySelector('.price').textContent = p.price;
  document.getElementById('grid').appendChild(node);
});
</script>

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

What happened?

• template content is inert until cloned.
• Prefer textContent over innerHTML for user data.

Practice next

1. Define a template element.
2. Clone and fill fields.
3. Append to grid container.
4. Add a third plan from fetch.
5. Sort plans before render.

Remember

template + cloneNode. textContent for text. Container in HTML first.

MarkupVerse plan grid

Pricing page builds cards from JSON.

Outcome: Two plans appear without duplicate HTML.