ExtJS中的Ext.DomHelper.append()方法的使用

//Ext.DomHelper.append()方法是在指定节点元素处添加新的元素，新添加的元素会默认添加到指定元素的最后面

示例如下：

1、在id为root1的div元素下面添加一个div元素，并设置此元素的css样式为字体为红色，并且此div元素有子元素的存在

<script type="text/javascript">
Ext.onReady(function(){
Ext.DomHelper.append('root1',[
{tag:'div',cls:'red',children: [
{tag: 'li', id: 'item0', html: 'List Item 0'},
{tag: 'li', id: 'item1', html: 'List Item 1'},
{tag: 'li', id: 'item2', html: 'List Item 2'}]
}
]);
});
</script>
<div id='root1' style='border:1px solid red;padding:5px;margin:5px;background:green;'>
<span class="span1">span1</span>
<span class="span2">span2</span>
<span class="span3">span3</span>
<span class="span4">span4</span>
<span class="span5">span5</span>
</div>

2、在id为root1的div元素下面添加一个div元素，并设置此元素的css样式为red,此新添加的元素下面有一段html文字为sss

<script type="text/javascript">
Ext.onReady(function(){
Ext.DomHelper.append('root1',[
{tag:'div',cls:'red',html:'ssssss'}
]);
});
</script>
<div id='root1' style='border:1px solid red;padding:5px;margin:5px;background:green;'>
<span class="span1">span1</span>
<span class="span2">span2</span>
<span class="span3">span3</span>
<span class="span4">span4</span>
<span class="span5">span5</span>
</div>

3、Ext.DomHelper.append()添加多个新的子节点，主意与添加一个子节点的区别，多个节点时数组，需要使用[]

<script type="text/javascript">
Ext.onReady(function(){
Ext.DomHelper.append('root1',[
{tag:'div',cls:'red',html:'ssssss'},
{tag:'div',cls:'red',html:'bbbbbbbb'}
]);
});
</script>
<div id='root1' style='border:1px solid red;padding:5px;margin:5px;background:green;'>
<span class="span1">span1</span>
<span class="span2">span2</span>
<span class="span3">span3</span>
<span class="span4">span4</span>
<span class="span5">span5</span>
</div>

4、另外还有Ext.DomHelper.insertAfter()和 Ext.DomHelper.insertBefore和Ext.DomHelper.overwrite()方法 分别指在指定的节点元素的后面、前面、覆盖指定节点元素内容