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="">
    <script src="../../ext-4.2.1/ext-"></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);
    <div id="div1">


Try it on