How to add HTML templates in a page?

Question

I made an template of a price box, and I want that every time that I click a button a new price box shows up in the page. Just a simple example for my template:

<div>
  <h1> Product: {productName} </h1>
</div>

And everytime that I click a button, I pass the name and this template will show in the page.

I was looking and I saw the template tag with javascript and another solutions like Mustache. Which approach would be better and more readable?

Answer 1

Not exactly sure what your asking but this would be very simple using pure javascript. Please see the following code snippet:

 function addProduct() { const productName = document.querySelector('#productName').value; productName ? document.querySelector('#products').innerHTML += ` <div><h1>Product: ${productName}</h1></div> ` : alert('Enter Product Name'); } document.querySelector('#add').addEventListener('click', () => addProduct()); 

 <input type="text" id="productName"> <button id="add">Add Product</button> <div id="products"></div>