這篇文章主要介紹了JS動態創建DOM元素的方法,涉及javascript動態創建DOM元素及DOM元素事件綁定與刪除的相關技巧,需要的朋友可以參考下

本文實例講述了JS動態創建DOM元素的方法。分享給大家供大家參考。具體如下：

近日，因工作需要，需要通過點擊某個元素后， 動態創建一個DOM元素并顯示，因此寫了一些相關的JS函數，在此記錄，以作備忘：

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

使用示例：

1. var htmlAttributes= 
2. [ 
3. {attrName:'class',attrValue:'樣式名稱' } //for IEs 
4. , 
5. {attrName:'className',attrValue: '樣式名稱'} //for ff 
6. ]  
7. var domParams={domTag:'div',content:'動態div的innerHTML',otherAttributes:htmlAttributes}; 
8. var newHtmlDom=dynCreateDomObject(domParams); 
9. //通過 setAttribute('style','position:absolute.....................') 
10. //的形式來指定style沒有效果，只能通過如下形式,jiong 
11. newHtmlDom.style.zIndex='8888'; 
12. newHtmlDom.style.position='absolute'; 
13. newHtmlDom.style.left='100px'; 
14. newHtmlDom.style.top='200px'; 

希望本文所述對大家的javascript程序設計有所幫助。