近日，因工作需要，需要通過點擊某個元素後， 動態創建一個DOM元素並顯示，因此寫了一些相關的JS函數，在此記錄，以作備忘：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 /* 動態創建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等，但不支持inputform等特別的元素 @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); } }使用示例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 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程序設計有所幫助。