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

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

/**//*

动态创建DOM元素的相关函数支持

www.jcodecraeer.com

*/

/**//*

获取以某个元素的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

{

var otherAttribute =domParams.otherAttributes[i];

dynObj.setAttribute(otherAttribute.attrName,otherAttribute.attrValue);

}

}

/**//*end 添加属性*/

/**//*添加相关事件*/

if(null!=domParams.eventRegisters)

{

for(var i=0;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);

}

}