Add Nested Element with appendChild using JSON Array

Question

I want to make div look like this

<div>
     <div class="container">
         <div>
             <h1 class="head" stye="color:red'">Hello</h1>
             <p>This is Paragraph </p>
         </div>
         <p style="color:#888;">This is another, Paragraph</p>
     </div>
     <div>
          <p style="para">
     </div>
</div>

I want to append it at

document.body.appendChild(elemt);

by using JSON like

var elemt = {
        tagName: 'div',
        tagAttribute: [],
        children: [div1, div2]
    };

var div1 = {
        tagName: 'div',
        tagAttribute: [{class:'container'}],
        children: [{
                  tagName: 'div',
                  tagAttribute: [],
                  children: [{tagName: 'h1',
                               tagAttribute: [{style:'color: red;'}, 
                                              {class:'head'}],
                               children: [],
                               text:'Hello'
                                   },                                
                             {tagName: 'p',
                             tagAttribute: [{style:'color:#888;'}],
                             children: [],
                             text:'This is Paragraph'
                            }]
                  },
                  {tagName: 'p',
                  tagAttribute: [],
                  children:[],
                  text: 'This is another, Paragraph'
                  }]
           }
var div2 = {
            tagName: 'div',
            tagAttribute: [],
            children: [{tagName: 'p',
                             tagAttribute: [{style:'color:#888;'}],
                             children: [],
                             text:'This is another, Paragraph'
                            }]
           }

show me the pure JavaScript method for it, I want above JSON Array in HTML format.

to make the solution, if you any alternate Solution, then please share here

If anybody have library like html element created by using JSON then please share here.

Answer 1

The most easy way to do this is using recursion.

The function first creates the element from the JSON data using the DOM API ( described here ) and then loop through its children, applying the same function recursively to each child.

Here is an example of the function you look for

 var div1 = { tagName: 'div', tagAttribute: [{class:'container'}], children: [{ tagName: 'div', tagAttribute: [], children: [{tagName: 'h1', tagAttribute: [{style:'color: red;'}, {class:'head'}], children: [], text:'Hello' }, {tagName: 'p', tagAttribute: [{style:'color:#888;'}], children: [], text:'This is Paragraph' }] }, {tagName: 'p', tagAttribute: [], children:[], text: 'This is another, Paragraph' }] } var div2 = { tagName: 'div', tagAttribute: [], children: [{tagName: 'p', tagAttribute: [{style:'color:#888;'}], children: [], text:'This is another, Paragraph' }] } var elemt = { tagName: 'div', tagAttribute: [], children: [div1, div2] }; function JSON2Node(data) { let elem = document.createElement(data.tagName); for (let attribute of data.tagAttribute) { for (let name in attribute) elem.setAttribute(name, attribute[name]); } if (data.text) elem.appendChild(document.createTextNode(data.text)); if (data.children) { for(let child of data.children) elem.appendChild(JSON2Node(child)); } return elem; } console.log(JSON2Node(elemt)); 

Answer 2

Here, this uses a recursive function to build the HTML using the JSON.

 const buildElement = (elem) => { let domElem = document.createElement(elem.tagName); elem.tagAttribute.forEach(a => { let attName = Object.getOwnPropertyNames(a)[0]; let attValue = a[attName]; domElem.setAttribute(attName, attValue); }); if(elem.text) domElem.innerText = elem.text; elem.children.forEach(child => { domElem.appendChild(buildElement(child)); }); return domElem; }; var div1 = { tagName: 'div', tagAttribute: [{ class: 'container' }], children: [{ tagName: 'div', tagAttribute: [], children: [{ tagName: 'h1', tagAttribute: [{ style: 'color: red;' }, { class: 'head' } ], children: [], text: 'Hello' }, { tagName: 'p', tagAttribute: [{ style: 'color:#888;' }], children: [], text: 'This is Paragraph' } ] }, { tagName: 'p', tagAttribute: [], children: [], text: 'This is another, Paragraph' } ] } var div2 = { tagName: 'div', tagAttribute: [], children: [{ tagName: 'p', tagAttribute: [{ style: 'color:#888;' }], children: [], text: 'This is another, Paragraph' }] }; var elemt = { tagName: 'div', tagAttribute: [], children: [div1, div2] }; document.body.appendChild(buildElement(elemt));