 <p>The panel's <a href="http://docs-origin.sencha.com/extjs/4.1.3/#!/api/Ext.panel.Panel-method-update" rel="nofollow">update</a> function expects a HTML string instead of a DOM object:</p> <pre><code>// using a HTML string Ext.getCmp('treeContainer').update("&lt;div class='NodeContent'&gt;" + node.displayText + "&lt;/div&gt;"); // using a DOM object Ext.getCmp('treeContainer').update(nodeDiv.outerHTML); </code></pre> <p>Note, that using this function will always replace all existing HTML content in the panel.</p> <hr> <p>If you really want to <strong>append</strong> HTML (i.e. preserve existing HTML content), you need to get a target element to append your HTML/DOM node to.</p> <p>This could be the panel's default render target element:</p> <pre><code>var panel = Ext.getCmp('treeContainer'), renderEl = panel.isContainer ? panel.layout.getRenderTarget() : panel.getTargetEl(); // using a DOM node renderEl.appendChild(nodeDiv); // using a HTML string renderEl.insertHtml('beforeEnd', "&lt;div class='NodeContent'&gt;" + node.displayText + "&lt;/div&gt;"); </code></pre> <p>Or - as this may change depending on your panel's layout - you just create a containg element in your initial <a href="http://docs-origin.sencha.com/extjs/4.1.3/#!/api/Ext.panel.Panel-cfg-html" rel="nofollow">html</a> config:</p> <pre><code>{ xtype: 'panel', id: 'treeContainer', html: '&lt;div class="html-content"&gt;&lt;/div&gt;' } </code></pre> <p>and append your content there:</p> <pre><code>Ext.getCmp('treeContainer').getEl().down('.html-content').appendChild(nodeDiv); </code></pre> <p>In any of the latter two cases, you should update the panel's layout afterwards, as you changed it's content manually:</p> <pre><code>Ext.getCmp('treeContainer').updateLayout(); </code></pre>