javascript - 如何在页面中添加HTML模板？

Question

我制作了一个价格框模板，我希望每次单击按钮时，页面中都会显示一个新的价格框。只是我的模板的一个简单示例:

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

每次单击按钮时，我都会传递名称，并且此模板将显示在页面中。

我正在寻找，我看到了带有 javascript 的模板标签和其他解决方案，例如 Mustache。哪种方法更好、更具可读性？

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>