Class Ext.DomHelper

Utility class for working with DOM and/or Templates. It transparently supports using HTML fragments or DOM.
This is an example, where an unordered list with 5 children items is appended to an existing element with id 'my-div':

var dh = Ext.DomHelper;
var list = dh.append('my-div', {
    id: 'my-ul', tag: 'ul', cls: 'my-list', children: [
        {tag: 'li', id: 'item0', html: 'List Item 0'},
        {tag: 'li', id: 'item1', html: 'List Item 1'},
        {tag: 'li', id: 'item2', html: 'List Item 2'},
        {tag: 'li', id: 'item3', html: 'List Item 3'},
        {tag: 'li', id: 'item4', html: 'List Item 4'}
    ]
});

Element creation specification parameters in this class may also be passed as an Array of specification objects. This can be used to insert multiple sibling nodes into an existing container very efficiently. For example, to add more list items to the example above:

dh.append('my-ul', [
    {tag: 'li', id: 'item5', html: 'List Item 5'},
    {tag: 'li', id: 'item6', html: 'List Item 6'} ]);

Element creation specification parameters may also be strings. If useDom is false, then the string is used as innerHTML. If useDom is true, a string specification results in the creation of a text node.

For more information and examples, see the original blog post.

This class is a singleton and cannot be created directly.