Creating nested HTML element using javascript

Question

Every time I will click on a button this HTML element will add on UI dynamically and there will be dynamic value inside it. How can I do this using vanilla 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

You can do it like this

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

So, assuming that you have a proper selector, you can get the tag by calling querySelector and then you can append whatever you have in yourTemplate .