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

  1 /**/ /*
  2    动态创建DOM元素的相关函数支持
  3     www.cnblogs.com/mcjeremy
  4*/
  5 /**/ /*
  6  获取以某个元素的DOM对象
  7  @obj  该元素的ID字符串
  8*/
  9 function getElement(obj)
10 {
11  returntypeof obj=='string'?document.getElementById(obj):obj;
12}
13 /**/ /*
14  获取某个元素的位置
15  @obj 该元素的DOM对象，或该元素的ID
16*/
17 function 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  elseif(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*/
54 function addEventHandler(oTarget, sEventType, fnHandler)
55 {
56    if (oTarget.addEventListener)
57    {
58        oTarget.addEventListener(sEventType, fnHandler, false);
59    }
60    elseif (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*/
75 function removeEventHandler(oTarget,sEventType,fnHandler)
76 {
77    if(oTarget.removeEventListener)
78    {
79       oTarget.removeEventListener(sEventType,fnHandler,false)
80    }
81    elseif(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*/
103 function 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*/
156 function 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

<h3>
   心静似高山流水不动，心清若巫峰雾气不沾。
</h3>