Me pregunto si hay una manera "fácil" de crear un gran objeto DOM especificando los atributos en un json.

Sé que es posible hacer esto con appendChild y/o innerHTML, pero para este objeto en cuestión, parece bastante complicado.

El objetivo es crear este objeto HTML de abajo hacia arriba en javascript:

 <div class="p-2"> <div class="d-flex p-2 bg-dark2-35"> <div class="Popover h-3"> <div class="pfp" style="background-image: url('/data/images/PP/1.png')"></div> </div> <div class="d-grid ms-2 w-100"> <p><b class="lead text-blue">Username</b> — <i>2020-01-16 19:29:34</i></p> <p class="text-white">some comment text</p> </div> </div> </div>

Me preguntaba si es posible hacer algo como esto (sé que no funciona):

 let comment = document.getElementById("comment-section"); let elm = { className: "p-2", appendChild(node) { classList.add("d-flex", "p-2", "bg-dark2-35"), appendChild(node2){ classList.add("Popover", "h-3"), // ... and so on } } } comment.appendChild(elm);

¿Hay una manera fácil de hacer esto en JS puro? ¿Tendría que hacer una función para lograr esto? o tal vez ir tan lejos como para importar una biblioteca?

La pregunta es un poco similar aCreate DOM element from Object en javascript , pero estoy completamente perdido cuando se trata de tantos niños, con niños, etc.

Soy un poco novato cuando se trata de JavaScript. La pregunta puede parecer extraña.