Ok, so this is not earth-shattering, but I came across a pretty cool feature in Ext's DomHelper class the other day.

But first, a little context.  Don't you just HATE creating new HTML elements with JavaScript?  If you go the route of explicitly pasting them together, your code ends up looking like spaghetti…and I hope you're good at tracking down escaping errors 🙂

And what about wrangling with createELement, appendChild, and the ilk with their corresponding unpredictable behavior across browsers?

It's a gigantic pain in the butt, but as I found out recently, Ext makes it SUPER simple.  Using the DomHelper class, you can easily leverage Ext to confidently generate any number of elements without having to worry about escaping characters or remembering the nuances of creating elements for each browser.

Let's say I just want to make a new table:

Ext.DomHelper.append('cart-details', {tag:'table', id:'detail-table'});

In this super simple example, I'm adding a new table element to an existing div with an id of "cart-details." To add the table, I simply invoke the append() method from the DomHelper, and 40 characters later I'm all set.

But what is even cooler is that the DomHelper class allows you to create NESTED elements as well!  Check this out:

Ext.DomHelper.append('detail-table', {    tag: More >