<mce:script type="text/javascript" ><!-- Ext.DomHelper.append 內(nèi)容追加 var panel = new Ext.Panel({ title : 'Ext.DomHelper示例', width : '280px', renderTo : 'sub1', html : '<div id="div1" style="height:160px;padding:5px">原文本</div>' }); Ext.DomHelper.append(Ext.get("div1"),"<br>新追加了文本",true); Ext.DomHelper.applyStyles 樣式追加 var panel = new Ext.Panel({ title : 'Ext.DomHelper示例', width : '280px', renderTo : 'sub1', html : '<div id="div1" style="height:160px;padding:5px">原文本</div>' }); //給id為div1的元素指定一個(gè)樣式表 //其樣式表的形式可以是直接用文本,如:font-size:18px //也可以用文本表示的對(duì)象,如:{font-size:18px;} Ext.DomHelper.applyStyles(Ext.get("div1"),"font-size:18px;color:green;font-weight:bold;"); var str = Ext.get("div1").dom.outerHTML; //由于Ext.Msg.alert會(huì)展示alert里的html //所以我們特意用文本框來(lái)展示應(yīng)用了樣式表后的div效果字符串 Ext.Msg.alert('DomHelper示例','<textarea rows="6" cols="35">'+str+'</textarea>'); Template.append 追加模板內(nèi)容 var panel = new Ext.Panel({ title : 'Ext.DomHelper示例', width : '280px', renderTo : 'sub1', html : '<div id="div1" style="height:160px;padding:5px">原文本</div>' }); //首先通過(guò)DomHelper.createTemplate創(chuàng)建一套模板 var test = Ext.DomHelper.createTemplate('<div name="{id}">'+ '<span class="{cls}">{name:trim} {value:ellipsis(10)}<br>第二行文本</span>'+ '</div>'); //通過(guò)定義的模板替換模板中的變量,然后追加在div的id為div1的div里面進(jìn)行展現(xiàn) test.append(Ext.get("div1"),{id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'},true); Ext.DomHelper.insertAfter 后插新內(nèi)容 var panel = new Ext.Panel({ title : 'Ext.DomHelper示例', width : '280px', renderTo : 'sub1', html : '<div id="div1" style="height:60px;padding:5px;background-color:#D4D4D4">我是原來(lái)的Div對(duì)象</div>' }); //給指定的div1在其后插入一個(gè)新的div Ext.DomHelper.insertAfter(Ext.get("div1"),"<div id='div2' style='height:60px;padding:5px;background-color:#FEFCE7'>我是新追加的Div對(duì)象</div>"); }); Ext.DomHelper.insertBefore 前插新內(nèi)容 //給指定的div1在其后插入一個(gè)新的div Ext.DomHelper.insertBefore(Ext.get("div1"),"<div id='div2' style='height:60px;padding:5px;background-color:#FEFCE7'>我是新追加的Div對(duì)象</div>"); Ext.DomHelper.insertFirst 追加為第一個(gè)子元素 var panel = new Ext.Panel({ title : 'Ext.DomHelper示例', width : '280px', renderTo : 'sub1', html : '<div id="div1" style="height:160px;padding:5px;><div id="sub1">我是原來(lái)的Div的第一個(gè)子對(duì)象</div></div>' }); //給指定的div1在其后插入一個(gè)新的div Ext.DomHelper.insertFirst(Ext.get("div1"),"<div id='div2' style='height:60px;padding:5px;background-color:#D4D4D4'>我是新追加的Div對(duì)象</div>"); }); Ext.DomHelper.insertHtml 插入HTML內(nèi)容 var panel = new Ext.Panel({ title : 'Ext.DomHelper示例', width : '280px', renderTo : 'sub1', html : '<div style="height:160px;padding:5px;"><div id="div1" >我是原來(lái)的Div的第一個(gè)子對(duì)象</div></div>' }); //給指定的div1在之前插入一個(gè)新的html Ext.DomHelper.insertHtml("beforeBegin",document.getElementById("div1"),"我是新插入的Html文本"); Ext.DomHelper.overwrite 替換內(nèi)容 Ext.onReady(function(){ var panel = new Ext.Panel({ title : 'Ext.DomHelper示例', width : '220px', renderTo : 'sub1', html : '<div style="height:160px;padding:5px;"><div id="div1" >我是原來(lái)的Div的內(nèi)容</div></div>' }); //給指定的div1在之前插入一個(gè)新的html Ext.DomHelper.overwrite(document.getElementById("div1"),"我是新替換的Html文本"); // --></mce:script>

轉(zhuǎn)載于:https://www.cnblogs.com/johan/archive/2010/04/05/1947978.html

總結(jié)

以上是生活随笔為你收集整理的Ext.DomHelper类的使用示例（内容操作）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。