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()方法  分別指在指定的節點元素的後面、前面、覆蓋指定節點元素內容