如何在页面中添加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>