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