I'm wondering if there is an "easy" way to create a big DOM object by specifying the attributes in a json?

I know it's possible to do this with appendChild and/or innerHTML, but for this object in question, it looks quite messy.

The goal is to create this HTML object from the bottom up in 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>

I was wondering if it's possible to do something like this (I know it doesn't work):

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);

Is there an easy way to do this in pure JS? Would I have to make a function to achieve this? or maybe go as far as to import a library?

The question is a bit similar to Create DOM element from Object in javascript, but I'm completely lost when it comes to this many childrens, with childrens and so on

I'm a bit of a newbie when it comes to JavaScript. The question might come off as strange