Best practice for constructing new element from html snippet and Ext elements

[sorrro]

My question is:
What is the best practice for constructing new element from html snippet and Ext elements?

Lets say I have html snippet in string variable, like this:

<div class="root">
    <div class="item"/>
    <div class="form"/>
</div>

And in javascript I want to create two elements:

var extItem = new Ext.Panel(...)
var extForm = new Ext.FormPanel(...)

Then combine with html - put each element into appropriate div.

var root = DomHelper.createDom({tag : 'div'});
DomHelper.insertHtml('beforeEnd', root, htmlSnippet);
DomHelper.append(DomQuery.selectNode(".item", root), extItem);
DomHelper.append(DomQuery.selectNode(".form", root), extForm);

And then put the created html fragment to Document:

DomHelper.append(DomQuery.selectNode("#inRealDocument"), root);

Last command throws this exception (ExtJS version is 3.3.1):
uncaught exception: [Exception... "Component returned failure code: 0x80004001 (NS_ERROR_NOT_IMPLEMENTED) [nsIDOM3Document.domConfig]" nsresult: "0x80004001 (NS_ERROR_NOT_IMPLEMENTED)" location: "JS frame :: http://localhost:8080/ext-3.3.1/ext-all-debug.js :: createHtml :: line 373" data: no]

What am I doing wrong?

Or, if you think this approach is not good, then - what would you suggest?

[sorrro]

I would appreciate any ideas or suggestions on this.
I'm new to javascript, and I'm not sure whether this situation is usual or not.

Is it a correct way to build UI by combining html snippet and Ext widgets this way?

[Screamy]

This is strictly a personal opinion, but if you're new to Javascript and ExtJs, I strongly recommend that you do everything using ExtJs objects.