Как добавить HTML-шаблоны на страницу?

Question

Я создал шаблон ценового ящика и хочу, чтобы каждый раз, когда я нажимал кнопку, на странице появлялось новое ценовое поле.Просто простой пример для моего шаблона:

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

И каждый раз, когда я нажимаю кнопку, я передаю имя, и этот шаблон будет отображаться на странице.

Я искал и виделтег шаблона с javascript и другими решениями, такими как усы.Какой подход будет лучше и удобочитаемее?

Answer 1

Не совсем точно, что вы спрашиваете, но это было бы очень просто, используя чистый JavaScript.Пожалуйста, смотрите следующий фрагмент кода:

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>