通过JS动态创建一个html DOM元素并显示

近日，因工作需要，需要通过点击某个元素后， 动态创建一个DOM元素并显示，因此写了一些相关的JS函数，在此记录，以作备忘：

 
 
function getElement(obj) 
{ 
return typeof obj=='string'?document.getElementById(obj):obj; 
} 
 
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; 
} 
} 
 
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; 
} 
} 
 
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; 
} 
} 

 
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

使用示例：

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';