教你ExtJS从入门到放弃——篇二十六(示例23：DomHelper具类的方法:createHtml,createDom,append,insertHTML,overwrite,applyStyle）

为什么要学这个工具类

说到这几个方法之前，首先看看当参数为obj时，obj由哪些部分组成，

tag：标签名，比如input，div，ol，tr等等，

children或者cn：子元素数组，子元素也可以是obj或者单纯的字符串等

cls：样式可以是字符串或者对象形式

html：以html格式进行解析

进入正题,常用方法如下

1.createHtml（不建议用原生的document.createElement()方法，效率不高）

效果如下

弹窗内容如下：

然后panel里添加了一个超链接与一个输入框

2.createDom：创建原生的js的dom对象（不建议使用，效率低）

效果如下

3.append

效果如下

4.insertHtml:在元素的前或后或开始前，或结束前添加元素

第一个参数：插入节点的位置

第二个参数：原生dom节点或者文本节点

第三个参数：要插入的html结构的字符串

效果如下，看

F12查看页面元素可以看到，添加到了结束标签前

5.overwrite：替换

第一个参数为被替换的节点，可以是id，也可以是原生dom或者Ext封装的dom

第二个是替换的节点，

第三个参数为boolean类型，true返回值为Ext对象

效果如下

6.createTemplate：创建模板（后面会细说）

7.applyStyles：给元素添加样式

可以用前面的setStyles，但是我还是更习惯这个