JS动态创建DOM元素的方法

本文实例讲述了JS动态创建DOM元素的方法。分享给大家供大家参考。具体如下：

近日，因工作需要，需要通过点击某个元素后， 动态创建一个DOM元素并显示，因此写了一些相关的JS函数，在此记录，以作备忘：

function getElement(obj)
{
  return typeof obj=='string'?document.getElementById(obj):obj;
}

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;
  }
}

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;
   }
}

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;
   }
}

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

使用示例：

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';

希望本文所述对大家的javascript程序设计有所帮助。