/*
动态创建DOM元素的相关函数支持
*/
/*
获取以某个元素的DOM对象
@obj 该元素的ID字符串
*/
function getElement(obj)
{
  return typeof obj==\'string\'?document.getElementById(obj):obj;
}
/*
获取某个元素的位置
@obj 该元素的DOM对象，或该元素的ID
*/
function getObjectPosition(obj)
{
  obj=typeof obj===\'string\'?getElement(obj):obj;
  if(!obj)
  {
   return;
  } 
  var position=\'\';
  if(obj.getBoundingClientRect) //For IEs
  {
   position=obj.getBoundingClientRect();
   return {x:position.left,y:position.top};
  }
  else if(document.getBoxObjectFor)
  {
   position=document.getBoxObjectFor(obj);
   return {x:position.x,y:position.y};
  }
  else
  {
   position={x:obj.offsetLeft,y:obj.offsetTop};
   var parent=obj.offsetParent;
   while(parent)
   {
    position.x+=obj.offsetLeft;
    position.y+=obj.offsetTop;
    parent=obj.offsetParent;
   }
   return position;
  }
}
/*
为某个DOM对象动态绑定事件
@oTarget 被绑定事件的DOM对象
@sEventType 被绑定的事件名，注意，不加on的事件名，如 \'click\'
@fnHandler 被绑定的事件处理函数
*/
function addEventHandler(oTarget, sEventType, fnHandler)
{
   if (oTarget.addEventListener) 
   {
     oTarget.addEventListener(sEventType, fnHandler, false);
   } 
   else if (oTarget.attachEvent) //for IEs
   {
     oTarget.attachEvent(\"on\" + sEventType, fnHandler);
   } 
   else 
   {
     oTarget[\"on\" + sEventType] = fnHandler;
   }
}
/*
从某个DOM对象中去除某个事件
@oTarget 被绑定事件的DOM对象
@sEventType 被绑定的事件名，注意，不加on的事件名，如 \'click\'
@fnHandler 被绑定的事件处理函数
*/
function removeEventHandler(oTarget,sEventType,fnHandler)
{
   if(oTarget.removeEventListener) 
   {
    oTarget.removeEventListener(sEventType,fnHandler,false)
   }
   else if(oTarget.detachEvent) //for IEs
   {
    oTarget.detachEvent(sEventType,fnHandler);
   }
   else
   {
    oTarget[\'on\'+sEventType]=undefined;
   }
}
/*
创建动态的DOM对象
@domParams是被创建对象的属性的JSON表达，它具有如下属性：
@parentNode 被创建对象所属的父级元素(可为元素ID，也可为DOM对象）
@domId 被创建对象的ID
@domTag 被创建对象的tag名称，支持常用的布局元素，如div span等，但不支持input\\form等特别的元素 
@content 被创建的对象内容 
@otherAttributes 为被创建的对象添加除函数必需的属性外其它属性,如[{attrName:\'style.color\',attrValue:\'red\'}]
@eventRegisters 为被创建的对象添加事件，类似[{eventType:\'click\',eventHandler:adsfasdf}]的数组
-经过组合后，该参数具有如下形式:
{parentNode:document.body,domTag:\'div\',content:\'这是测试的\',otherAttributes:[{attrName:\'style.color\',attrValue:\'red\'}],eventRegisters:[{eventType:\'click\',eventHandler:fnHandler}]}
*/
function dynCreateDomObject(domParams)
{ 
  if(getElement(domParams.domId))
  {
   childNodeAction(\'remove\',domParams.parentNode,domParams.domId);
  }
  var dynObj=document.createElement(domParams.domTag);
  with(dynObj)
  {  
  //id也可以通过otherAttributes传入，但是出于ID的特殊性，此处仍然采用
  //JSON对象传入，并以DOM ID属性附件
   id=domParams.domId;
   innerHTML=domParams.content;
   //innerHTML是DOM属性，而id等是元素属性，注意区别
  }
  /*添加属性*/
  if(null!=domParams.otherAttributes)
  {
   for(var i=0;i<domParams.otherAttributes.length;i++)
   {    
    var otherAttribute =domParams.otherAttributes[i];
    dynObj.setAttribute(otherAttribute.attrName,otherAttribute.attrValue);
   }
  }
  /*end 添加属性*/
  /*添加相关事件*/
  if(null!=domParams.eventRegisters)
  {
   for(var i=0;i<domParams.eventRegisters.length;i++)
   {
    var eventRegister =domParams.eventRegisters[i];    
    addEventHandler(dynObj,eventRegister.eventType,eventRegister.eventHandler);
   }
  }
  /*end 添加相关事件*/ 
  try
  {   
    childNodeAction(\'append\',domParams.parentNode,dynObj);
  }
  catch($e)
  {
  } 
  return dynObj;
}
/*
从父结点中删除子结点
@actionType 默认为append,输入字符串 append | remove
@parentNode 父结点的DOM对象，或者父结点的ID
@childNode 被删除子结点的DOM对象 或者被删除子结点的ID
*/
function childNodeAction(actionType,parentNode,childNode)
{
 if(!parentNode)
 {return; }
 parentNode=typeof parentNode===\'string\'?getElement(parentNode):parentNode;
 childNode=typeof childNode===\'string\'?getElement(childNode):childNode;
 if(!parentNode || !childNode)
 {return;}
 var action=actionType.toLowerCase();
 if( null==actionType || action.length<=0 || action==\'append\')
 {
  action=\'parentNode.appendChild\';
 }
 else
 {
  action=\'parentNode.removeChild\';
 }
 
 try
 {
  eval(action)(childNode);
 }
 catch($e)
 {
  alert($e.message);  
 }
}

var htmlAttributes=
[
{attrName:\'class\',attrValue:\'样式名称\' } //for IEs
,
{attrName:\'className\',attrValue: \'样式名称\'} //for ff
]  
var domParams={domTag:\'div\',content:\'动态div的innerHTML\',otherAttributes:htmlAttributes};
var newHtmlDom=dynCreateDomObject(domParams);
//通过 setAttribute(\'style\',\'position:absolute.....................\')
//的形式来指定style没有效果，只能通过如下形式,jiong
newHtmlDom.style.zIndex=\'8888\';
newHtmlDom.style.position=\'absolute\';
newHtmlDom.style.left=\'100px\';
newHtmlDom.style.top=\'200px\';