directory : /web/ : motherboard.html

Directory path . web .
HTML Document File : motherboard.html

<!DOCTYPE html>
<title></title>

<!-- file: motherboard.html -->
<!-- https://replit.com/@dariocangialosi/visualedit#index.html -->

<div class="html_template" id="html_box">
<div>
<button onclick="add_box(event)">+ add box</button>
<span> <button onclick="add_word(event)">+ add word</button> </span>
</div>
</div>

<div id="root">
<div> <button onclick="add_box(event)">+ add box</button> </div>

</div>

<script>
var id=document.all
var qs=function(sel){return document.querySelector(sel)}
var qsa=function(sel){return document.querySelectorAll(sel)}

id.root.innerHTML+=id.html_box.innerHTML

function add_box(event){
    //event.target.parentNode.parentNode.innerHTML+=id.html_box.innerHTML
    //event.target.parentNode.parentNode.insertAdjacentHTML('beforeend', id.html_box.innerHTML )
    event.target.parentNode.insertAdjacentHTML('afterend', id.html_box.innerHTML )
}

function add_word(event,type){
    //event.target.parentNode.innerHTML+=/*html*/`<span>word </span>`
    event.target.parentNode.insertAdjacentHTML('beforeend', /*html*/`<span>word </span>` )
}

</script>

<style>
.html_template{display:none;}
</style>