<div class="box"><div id="myPanelBox" class="w_320"></div><div id="myPanelBoxAfter" class="w_320"></div><div id="insertFirst" class="w_320"></div><div id="upda" class="w_320"></div><div id="zjWz" class="w_320"></div>
</div>

Ext.onReady(function(){//6.3 Ext.core.DomHelper 可以透明地操作HTML或者DOM//6.3.1 Ext.core.DomHelper.append() //子节点追加var myPanelBox = new Ext.Panel({title : 'Ext.core.DomHelper节点追加示例',width : '280px',height: '300px',renderTo : 'myPanelBox',html : '<div id="div1" style="height:160px;padding:5px">原文本</div>'});var newAdd = Ext.core.DomHelper.append(Ext.get("div1"),'<br/><b>新加的文本</b>',false);//6.3.2 Ext.core.DomHelper.applyStyles() 给指定的元素添加样式console.info(Ext.get("div1").dom.outerHTML);//追加样式前Ext.core.DomHelper.applyStyles(Ext.get("div1"),"font-size:18px;color:green;");//追加样式console.info(Ext.get("div1").dom.outerHTML);//追加样式后//6.3.3 createTemplate() //创建Ext.Template(Ext标准模板),返回该模板//模板HTML代码var htmlTemp = '<div name="{id}"><span class="{cls}">{name:trim} {value:ellipsis(10)}</span><br/>第二行文本</div>'; //创建一套模板var test = Ext.core.DomHelper.createTemplate(htmlTemp);//替换模板追加到div1元素test.append(Ext.get("div1"),{id : 'myid',cls : 'myclass',name : 'foo',value : 'bar000000025252'},true);//6.3.4 insertAfter将新节点追加到某节点的后面(兄弟节点)//6.3.5 insertBefore将新节点追加到某节点的前面(兄弟节点)var myPanelBoxAfter = new Ext.Panel({title : '新节点追加到某节点的后面',width : '280px;',height: '300px',renderTo : 'myPanelBoxAfter',buttons : [{text : '后面追加',handler : function(){Ext.core.DomHelper.insertAfter(Ext.get("div2"),{tag : 'li',id : 'item1',html : '<div>我是追加在后面的div对象</div>'});}},{text : '前面追加',handler : function(){Ext.core.DomHelper.insertBefore(Ext.get("div2"),{tag : 'li',id : 'item2',html : '<div>我是追加在前面的div对象</div>'});}}],html : '<div id="div2">我是原来的div1</div>'});//6.3.6 insertFirst()插入第一个子元素var insertFirst = new Ext.Panel({title : '插入第一个子元素',width : '280px;',height: '300px',renderTo : 'insertFirst',buttons : [{text : '插入第一个子元素',handler : function(){Ext.core.DomHelper.insertFirst(Ext.get("firEl"),{tag : 'li',cls : 'myCls',html : '新加的第一个li'});}}],html : '<ol id="firEl"><li>原来的li元素</li></ol>'});//6.3.7 insertHtml()给指定的位置插入htmlvar zjWz = new Ext.Panel({title : '指定位置插入html',width : '480px;',height: '300px',renderTo : 'zjWz',buttons : [{text : 'beforeBegin位置',//兄弟元素前面handler : function(){Ext.core.DomHelper.insertHtml('beforeBegin',document.getElementById('liOne'),'新加的beforeBegin位置内容');}},{text : 'afterBegin位置',//子元素的前面handler : function(){Ext.core.DomHelper.insertHtml('afterBegin',document.getElementById('liOne'),'新加的afterBegin位置内容');}},{text : 'beforeEnd位置',//子元素后面handler : function(){Ext.core.DomHelper.insertHtml('beforeEnd',document.getElementById('liOne'),'新加的beforeEnd位置内容');}},{text : 'afterEnd位置',handler : function(){//兄弟元素后面Ext.core.DomHelper.insertHtml('afterEnd',document.getElementById('liOne'),'新加的afterEnd位置内容');}}],html : '<ol id="firEl"><li id="liOne">原来的li元素</li></ol>'});//6.3.8    overwrite() 替换新内容var upda = new Ext.Panel({title :　'替换新内容',width : '280px',height: '300px',renderTo : 'upda',buttons: [{text :'替换新内容',handler : function(){Ext.core.DomHelper.overwrite(Ext.get("div4"),'我是新的内容');}}],html : '<div id="div4" style="height:160px;padding:5px">我是原文本</div>'});});