通过JS动态创建DOM元素备忘

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

 ---09-07-03 更改

 

 

  1/**//*
  2    动态创建DOM元素的相关函数支持
  3     www.cnblogs.com/mcjeremy
  4*/
  5/**//*
  6  获取以某个元素的DOM对象
  7  @obj  该元素的ID字符串
  8*/
  9function getElement(obj)
 10{
 11  return typeof obj=='string'?document.getElementById(obj):obj;
 12}
 13/**//*
 14  获取某个元素的位置
 15  @obj 该元素的DOM对象，或该元素的ID
 16*/
 17function getObjectPosition(obj)
 18{
 19  obj=typeof obj==='string'?getElement(obj):obj;
 20  if(!obj)
 21  {
 22    return;
 23  }  
 24  var position='';
 25  if(obj.getBoundingClientRect) //For IEs
 26  {
 27    position=obj.getBoundingClientRect();
 28    return {x:position.left,y:position.top};
 29  }
 30  else if(document.getBoxObjectFor)
 31  {
 32    position=document.getBoxObjectFor(obj);
 33    return {x:position.x,y:position.y};
 34  }
 35  else
 36  {
 37    position={x:obj.offsetLeft,y:obj.offsetTop};
 38    var parent=obj.offsetParent;
 39    while(parent)
 40    {
 41       position.x+=obj.offsetLeft;
 42       position.y+=obj.offsetTop;
 43       parent=obj.offsetParent;
 44    }
 45    return position;
 46  }
 47}
 48/**//*
 49  为某个DOM对象动态绑定事件
 50  @oTarget 被绑定事件的DOM对象
 51  @sEventType 被绑定的事件名，注意，不加on的事件名，如 'click'
 52  @fnHandler 被绑定的事件处理函数
 53*/
 54function addEventHandler(oTarget, sEventType, fnHandler)
 55{
 56    if (oTarget.addEventListener) 
 57    {
 58        oTarget.addEventListener(sEventType, fnHandler, false);
 59    } 
 60    else if (oTarget.attachEvent)  //for IEs
 61    {
 62        oTarget.attachEvent("on" + sEventType, fnHandler);
 63    } 
 64    else 
 65    {
 66        oTarget["on" + sEventType] = fnHandler;
 67    }
 68  }
 69/**//*
 70  从某个DOM对象中去除某个事件
 71  @oTarget 被绑定事件的DOM对象
 72  @sEventType 被绑定的事件名，注意，不加on的事件名，如 'click'
 73  @fnHandler 被绑定的事件处理函数
 74*/
 75function removeEventHandler(oTarget,sEventType,fnHandler)
 76{
 77    if(oTarget.removeEventListener) 
 78    {
 79       oTarget.removeEventListener(sEventType,fnHandler,false)
 80    }
 81    else if(oTarget.detachEvent)  //for IEs
 82    {
 83       oTarget.detachEvent(sEventType,fnHandler);
 84    }
 85    else
 86    {
 87       oTarget['on'+sEventType]=undefined;
 88    }
 89  }
 90
 91/**//*
 92  创建动态的DOM对象
 93  @domParams是被创建对象的属性的JSON表达，它具有如下属性：
 94  @parentNode 被创建对象所属的父级元素(可为元素ID，也可为DOM对象）
 95  @domId 被创建对象的ID
 96  @domTag 被创建对象的tag名称，支持常用的布局元素，如div span等，但不支持input\form等特别的元素  
 97  @content 被创建的对象内容 
 98  @otherAttributes 为被创建的对象添加除函数必需的属性外其它属性,如[{attrName:'style.color',attrValue:'red'}]
 99  @eventRegisters 为被创建的对象添加事件，类似[{eventType:'click',eventHandler:adsfasdf}]的数组
100  -经过组合后，该参数具有如下形式:
101  {parentNode:document.body,domTag:'div',content:'这是测试的',otherAttributes:[{attrName:'style.color',attrValue:'red'}],eventRegisters:[{eventType:'click',eventHandler:fnHandler}]}
102*/
103function dynCreateDomObject(domParams)
104{ 
105   if(getElement(domParams.domId))
106   {
107     childNodeAction('remove',domParams.parentNode,domParams.domId);
108   }
109       
110   var dynObj=document.createElement(domParams.domTag);
111
112   with(dynObj)
113   {    
114   //id也可以通过otherAttributes传入，但是出于ID的特殊性，此处仍然采用
115   //JSON对象传入，并以DOM ID属性附件
116     id=domParams.domId;
117     innerHTML=domParams.content; //innerHTML是DOM属性，而id等是元素属性，注意区别
118   }
119   /**//*添加属性*/
120   if(null!=domParams.otherAttributes)
121   {
122      for(var i=0;i<domParams.otherAttributes.length;i++)
123      {       
124        var otherAttribute =domParams.otherAttributes[i];
125        dynObj.setAttribute(otherAttribute.attrName,otherAttribute.attrValue);
126      }
127   }
128   /**//*end 添加属性*/
129   /**//*添加相关事件*/
130   if(null!=domParams.eventRegisters)
131   {
132      for(var i=0;i<domParams.eventRegisters.length;i++)
133      {
134        var eventRegister =domParams.eventRegisters[i];        
135        addEventHandler(dynObj,eventRegister.eventType,eventRegister.eventHandler);
136      }
137   }
138   /**//*end 添加相关事件*/  
139   try
140   {     
141       childNodeAction('append',domParams.parentNode,dynObj);
142   }
143   catch($e)
144   {
145    
146   } 
147      
148   return dynObj;
149}
150/**//*
151  从父结点中删除子结点
152  @actionType 默认为append,输入字符串 append | remove
153  @parentNode 父结点的DOM对象，或者父结点的ID
154  @childNode 被删除子结点的DOM对象 或者被删除子结点的ID
155*/
156function childNodeAction(actionType,parentNode,childNode)
157{
158  if(!parentNode)
159  {return; }
160   
161 
162  parentNode=typeof parentNode==='string'?getElement(parentNode):parentNode;
163  childNode=typeof childNode==='string'?getElement(childNode):childNode;
164  if(!parentNode || !childNode)
165  {return;}
166  
167  var action=actionType.toLowerCase();
168  if( null==actionType || action.length<=0 || action=='append')
169  {
170    action='parentNode.appendChild';
171  }
172  else
173  {
174    action='parentNode.removeChild';
175  }
176 
177  try
178  {
179    eval(action)(childNode);
180  }
181  catch($e)
182  {
183    alert($e.message);    
184  }
185}
186

使用示例：

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

 

 以上代码纯属原创

欢迎转载，但请注明出处：http://www.cnblogs.com/mcjeremy