Recently, due to work needs, need to click on an element, dynamically create a DOM element and display, so wrote some related JS functions, in this record, for memos:

/**/
/**/
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 can also be passed in through otherAttributes, but for the special nature of id, it is still used here
//The JSON object is passed in and attached with the DOM ID attribute
id=domParams.domId;
innerHTML=domParams.content; //InnerHTML is a DOM attribute, and id and so on are element attributes
}
/**/
if(null!=domParams.otherAttributes)
{
for(var i=0;i<domParams.otherAttributes.length;i++)
{
var otherAttribute =domParams.otherAttributes[i];
dynObj.setAttribute(otherAttribute.attrName,otherAttribute.attrValue);
}
}
/**/
/**/
if(null!=domParams.eventRegisters)
{
for(var i=0;i<domParams.eventRegisters.length;i++)
{
var eventRegister =domParams.eventRegisters[i];
addEventHandler(dynObj,eventRegister.eventType,eventRegister.eventHandler);
}
}
/**/
try
{
childNodeAction('append',domParams.parentNode,dynObj);
}
catch($e)
{

}

return dynObj;
}
/**/
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);
}
}

Examples of use:

var htmlAttributes=
[

{attrName:'class',attrValue:' The style name '} //for IEs

,

{attrName:'className',attrValue: ' The style name '} //for ff

]

var domParams={domTag:'div', content:' dynamic div the innerHTML', otherAttributes:htmlAttributes};

var newHtmlDom=dynCreateDomObject(domParams);

//Through the setAttribute (' style ', 'position: absolute... ')

//The form to specify style has no effect, only through the following form,jiong

newHtmlDom.style.zIndex='8888';

newHtmlDom.style.position='absolute';

newHtmlDom.style.left='100px';

newHtmlDom.style.top='200px';