Create html DOM element using object in javascript without jQuery-CodePudding

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 >
    <div >
        <div >
            <div  style="background-image: url('/data/images/PP/1.png')"></div>
        </div>
        <div >
            <p><b >Username</b> — <i>2020-01-16 19:29:34</i></p>
            <p >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

CodePudding user response：

You can use template literals Mdn docs - Template Literals

const selector = document.getElementById('comment-section');

// By using createElement you can deal with loops, event listener, etc..

const comment = document.createElement('div');
comment.classList.add("p-2");

const username = "TypeWar";

// Template literals

comment.innerHTML = `
  <div >
      <div >
          <div  style="background-image: url('/data/images/PP/1.png')"></div>
      </div>
      <div >
          <p><b >${username}</b> — <i>2020-01-16 19:29:34</i></p>
          <p >some comment text</p>
      </div>
  </div>
`;

selector.appendChild(comment);

<div id="comment-section">
</div>