<html>
  <body>
  </body>
</html>
  let html = [
        {
            'type': 'div',
            'args': {
                'id': 'dialog',
            },
            'childrens': [
                {
                    'type': 'h1',
                    'args': {
                        'textContent': 'Заголовок 1'
                    }
                },
                {
                    'type': 'h2',
                    'args': {
                        'textContent': 'Заголовок 2'
                    }
                },
                {
                    'type': 'h5',
                    'args': {
                        'textContent': 'Заголовок 5'
                    }
                },
                {
                    'type': 'p',
                    'args': {
                        'textContent': 'Параграф'
                    }
                },
            ]
        }
    ];

    html.forEach(parent => {
        let parentObject = document.createElement(parent.type);
        Object.entries(parent.args).forEach(([key, value]) => {
            parentObject[key] = value;
        });
        parent.childrens.forEach(children => {
            let childrenObject = document.createElement(children.type);
            Object.entries(children.args).forEach(([key, value]) => {
                childrenObject[key] = value;
            });
            parentObject.appendChild(childrenObject);
        });
        document.body.appendChild(parentObject);
    });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.