DomHelper:

Ext.dom.Helper class allows us to add new DOM elements, modify or remove existing DOM elements in an HTML document.

DomHelper class uses JSON based syntax with following special attributes to create new DOM elements.

Attribute	Description
Tag	HTML tag of the element to create
Children or cn	an array of the same type of element definition of tags
Cls	The class attribute of an element
Html	innerHTML value of the element
Id	The id of the element

The following example demonstrates how to create DOM elements using Ext.DomHelper class.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../ext-4.2.1/ext-4.2.1.883/ext-debug.js"></script>
    <script>
        Ext.onReady(function () {

            var dh = Ext.DomHelper; // ExtJS DomHelper Utility Class 
            var listItems = {
                id: 'dhlist',
                tag: 'ul',
                children: [{
                    tag: 'li',
                    html: 'item 1'
                }, {
                    tag: 'li',
                    html: 'item 2'
                }, {
                    tag: 'li',
                    html: 'item 3'
                }]
            }

            dh.append("div1", listItems);
        });
    </script>
</head>
<body>
    <div id="div1">

    </div>
</body>
</html>

Try it on https://fiddle.sencha.com/#fiddle/s7s