首页 / 脚本样式 / JavaScript / JS动态创建DOM元素的方法

/*动态创建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）; }}

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没有效果，只能通过如下形式,jiongnewHtmlDom.style.zIndex="8888";newHtmlDom.style.position="absolute";newHtmlDom.style.left="100px";newHtmlDom.style.top="200px";