使用 javascript 創建嵌套的 HTML 元素

Question

每次我點擊一個按鈕時，這個 HTML 元素都會動態添加到 UI 上，並且里面會有動態值。 如何使用香草 Javascript 做到這一點？

<div class="p-4 h-auto flex flex-col items-center justify-center space-y-5 bg-white rounded shadow">
    <div id="counter" class="text-2xl font-semibold"></div>
    <div class="flex space-x-3">
        <button id="increment" class="bg-indigo-400 text-white px-3 py-2 rounded shadow"> Increment </button>
        <button id="decrement" class="bg-red-400 text-white px-3 py-2 rounded shadow"> Decrement </button>
    </div>
</div>  

Answer 1

你可以這樣做

document.querySelector(selector).innerHTML += yourTemplate;

所以，假設你有一個合適的選擇器，你可以通過調用querySelector來獲取標簽，然后你可以 append 你在yourTemplate中擁有的任何東西。