使用 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中拥有的任何东西。