JS动态创建DOM元素的方法

/*动态创建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没有效果，只能通过如下形式,jiongnewHtmlDom.style.zIndex='8888';newHtmlDom.style.position='absolute';newHtmlDom.style.left='100px';newHtmlDom.style.top='200px';