近日，因工作需要，需要通過(guò)點(diǎn)擊某個(gè)元素后， 動(dòng)態(tài)創(chuàng)建一個(gè)DOM元素并顯示，因此寫了一些相關(guān)的JS函數(shù)，在此記錄，以作備忘：

/**//* 動(dòng)態(tài)創(chuàng)建DOM元素的相關(guān)函數(shù)支持 www.jcodecraeer.com */ /**//* 獲取以某個(gè)元素的DOM對(duì)象 @obj 該元素的ID字符串 */ function getElement(obj) { return typeof obj=='string'?document.getElementById(obj):obj; } /**//* 獲取某個(gè)元素的位置 @obj 該元素的DOM對(duì)象，或該元素的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; } } /**//* 為某個(gè)DOM對(duì)象動(dòng)態(tài)綁定事件 @oTarget 被綁定事件的DOM對(duì)象 @sEventType 被綁定的事件名，注意，不加on的事件名，如 'click' @fnHandler 被綁定的事件處理函數(shù) */ 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; } } /**//* 從某個(gè)DOM對(duì)象中去除某個(gè)事件 @oTarget 被綁定事件的DOM對(duì)象 @sEventType 被綁定的事件名，注意，不加on的事件名，如 'click' @fnHandler 被綁定的事件處理函數(shù) */ 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; } } /**//* 創(chuàng)建動(dòng)態(tài)的DOM對(duì)象 @domParams是被創(chuàng)建對(duì)象的屬性的JSON表達(dá)，它具有如下屬性： @parentNode 被創(chuàng)建對(duì)象所屬的父級(jí)元素(可為元素ID，也可為DOM對(duì)象） @domId 被創(chuàng)建對(duì)象的ID @domTag 被創(chuàng)建對(duì)象的tag名稱，支持常用的布局元素，如div span等，但不支持input/form等特別的元素 @content 被創(chuàng)建的對(duì)象內(nèi)容 @otherAttributes 為被創(chuàng)建的對(duì)象添加除函數(shù)必需的屬性外其它屬性,如[{attrName:'style.color',attrValue:'red'}] @eventRegisters 為被創(chuàng)建的對(duì)象添加事件，類似[{eventType:'click',eventHandler:adsfasdf}]的數(shù)組 -經(jīng)過(guò)組合后，該參數(shù)具有如下形式: {parentNode:document.body,domTag:'div',content:'這是測(cè)試的',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也可以通過(guò)otherAttributes傳入，但是出于ID的特殊性，此處仍然采用 //JSON對(duì)象傳入，并以DOM ID屬性附件 id=domParams.domId; innerHTML=domParams.content; //innerHTML是DOM屬性，而id等是元素屬性，注意區(qū)別 } /**//*添加屬性*/ 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 添加屬性*/ /**//*添加相關(guān)事件*/ 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 添加相關(guān)事件*/ try { childNodeAction('append',domParams.parentNode,dynObj); } catch($e) { } return dynObj; } /**//* 從父結(jié)點(diǎn)中刪除子結(jié)點(diǎn) @actionType 默認(rèn)為append,輸入字符串 append | remove @parentNode 父結(jié)點(diǎn)的DOM對(duì)象，或者父結(jié)點(diǎn)的ID @childNode 被刪除子結(jié)點(diǎn)的DOM對(duì)象 或者被刪除子結(jié)點(diǎn)的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); } } 

使用示例：

var htmlAttributes= [{attrName:'class',attrValue:'樣式名稱'} //for IEs,{attrName:'className',attrValue: '樣式名稱'} //for ff] var domParams={domTag:'div', content:'動(dòng)態(tài)div的innerHTML', otherAttributes:htmlAttributes};var newHtmlDom=dynCreateDomObject(domParams);//通過(guò)setAttribute('style','position:absolute.....................')//的形式來(lái)指定style沒(méi)有效果，只能通過(guò)如下形式,jiongnewHtmlDom.style.zIndex='8888';newHtmlDom.style.position='absolute';newHtmlDom.style.left='100px';newHtmlDom.style.top='200px';

JavaScript技術(shù)：通過(guò)JS動(dòng)態(tài)創(chuàng)建一個(gè)html DOM元素并顯示，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。