Sencha Touch中的Ext.DomHelper组件可以方便的实现对元素的追加或重写操作

示例：

 launch:function(){  
 function appendDom(){  
 Ext.DomHelper.append(‘my-div’,{  
 id:’url-list’,  
 tag:’ul’,    //指定追加的元素种类  
 cn:[//或children，使用数组形式定义数组内的子元素  
 {  
 tag:’li’,,  
 cn:[{  
 tag:’a’,  
 html:’google’,  
 href:’//www.google.com’  
 }]  
 },  
 {  
 tag:’li’,  
 cn:[{  
 tag:’a’,  
 //...以下省略  
 }]  
 }  
 ]  
 });  
 }  
 var myToolbar = Ext.create(‘Ext.Toolbar’,{  
 docked:’top’,  
 items:[{  
 xtype:’button’,  
 text:’追加元素’,  
 handler:function(){  
 appendDom();  
 }  
 }]  
 });  
 var myPanel = Ext.create(‘Ext.Panel’,{  
 id:’myPanel’,  
 html:’<div id=”my-div”></div>’,  
 items:[myToolbar]  
 });  
 Ext.Viewport.add(myPanel);  
 }

除了append，可以使用overwrite函数重写一个元素的内容，道理同上

在指定的位置追加与删除元素，有以下方法：

innsertAfter:在目标元素之后追加元素

innsertBefore:在目标元素之前追加元素

Ext.DomQuery:寻找元素，可以使用css的选择器选择，如：

Ext.DomQuery.select(‘[class*=”d”]’)//选取class为d的元素

Ext.each:遍历所有追加的元素

Ext.removeNode:删除指定元素

示例：

var elems = Ext.DomQuery.select(‘.add’);
Ext.each(elems,function(item,index,array){//function的参数：当前处理元素，当前处理元素下标，处理集合；elems为要处理的集合
Ext.removeNode(item);
})

以上代码的含义为：删除所有追加的class名为add的元素

本文由职坐标整理发布，更多相关内容，请关注职坐标WEB前端HTML5/CSS3频道！