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()方法  分别指在指定的节点元素的后面、前面、覆盖指定节点元素内容