通过JS动态创建一个html DOM元素并显示
近日，因工作需要，需要通过点击某个元素后，动态创建一个DOM元素并显示，因此写了一些相关的JS函数，在此记录，以作备忘：
/**//*
动态创建DOM元素的相关函数支持
www.jcodecraeer.com
*/
/**//*
获取以某个元素的DOM对象
@obj该元素的ID字符串
*/
functiongetElement(obj)
{
returntypeofobj=='string'?document.getElementById(obj):obj;
}
/**//*
获取某个元素的位置
@obj该元素的DOM对象，或该元素的ID
*/
functiongetObjectPosition(obj)
{
obj=typeofobj==='string'?getElement(obj):obj;
if(!obj)
{
return;
}
varposition='';
if(obj.getBoundingClientRect)//ForIEs
{
position=obj.getBoundingClientRect();
return{x:position.left,y:position.top};
}
elseif(document.getBoxObjectFor)
{
position=document.getBoxObjectFor(obj);
return{x:position.x,y:position.y};
}
else
{
position={x:obj.offsetLeft,y:obj.offsetTop};
varparent=obj.offsetParent;
while(parent)
{
position.x+=obj.offsetLeft;
position.y+=obj.offsetTop;
parent=obj.offsetParent;
}
returnposition;
}
}
/**//*
为某个DOM对象动态绑定事件
@oTarget被绑定事件的DOM对象
@sEventType被绑定的事件名，注意，不加on的事件名，如'click'
@fnHandler被绑定的事件处理函数
*/
functionaddEventHandler(oTarget,sEventType,fnHandler)
{
if(oTarget.addEventListener)
{
oTarget.addEventListener(sEventType,fnHandler,false);
}
elseif(oTarget.attachEvent)//forIEs
{
oTarget.attachEvent("on"+sEventType,fnHandler);
}
else
{
oTarget["on"+sEventType]=fnHandler;
}
}
/**//*
从某个DOM对象中去除某个事件
@oTarget被绑定事件的DOM对象
@sEventType被绑定的事件名，注意，不加on的事件名，如'click'
@fnHandler被绑定的事件处理函数
*/
functionremoveEventHandler(oTarget,sEventType,fnHandler)
{
if(oTarget.removeEventListener)
{
oTarget.removeEventListener(sEventType,fnHandler,false)
}
elseif(oTarget.detachEvent)//forIEs
{
oTarget.detachEvent(sEventType,fnHandler);
}
else
{
oTarget['on'+sEventType]=undefined;
}
}
/**//*
创建动态的DOM对象
@domParams是被创建对象的属性的JSON表达，它具有如下属性：
@parentNode被创建对象所属的父级元素(可为元素ID，也可为DOM对象）
@domId被创建对象的ID
@domTag被创建对象的tag名称，支持常用的布局元素，如divspan等，但不支持input\form等特别的元素
@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}]}
*/
functiondynCreateDomObject(domParams)
{
if(getElement(domParams.domId))
{
childNodeAction('remove',domParams.parentNode,domParams.domId);
}
vardynObj=document.createElement(domParams.domTag);
with(dynObj)
{
//id也可以通过otherAttributes传入，但是出于ID的特殊性，此处仍然采用
//JSON对象传入，并以DOMID属性附件
id=domParams.domId;
innerHTML=domParams.content;//innerHTML是DOM属性，而id等是元素属性，注意区别
}
/**//*添加属性*/
if(null!=domParams.otherAttributes)
{
for(vari=0;i<domParams.otherAttributes.length;i++)
{
varotherAttribute=domParams.otherAttributes[i];
dynObj.setAttribute(otherAttribute.attrName,otherAttribute.attrValue);
}
}
/**//*end添加属性*/
/**//*添加相关事件*/
if(null!=domParams.eventRegisters)
{
for(vari=0;i<domParams.eventRegisters.length;i++)
{
vareventRegister=domParams.eventRegisters[i];
addEventHandler(dynObj,eventRegister.eventType,eventRegister.eventHandler);
}
}
/**//*end添加相关事件*/
try
{
childNodeAction('append',domParams.parentNode,dynObj);
}
catch($e)
{
}
returndynObj;
}
/**//*
从父结点中删除子结点
@actionType默认为append,输入字符串append|remove
@parentNode父结点的DOM对象，或者父结点的ID
@childNode被删除子结点的DOM对象或者被删除子结点的ID
*/
functionchildNodeAction(actionType,parentNode,childNode)
{
if(!parentNode)
{return;}
parentNode=typeofparentNode==='string'?getElement(parentNode):parentNode;
childNode=typeofchildNode==='string'?getElement(childNode):childNode;
if(!parentNode||!childNode)
{return;}
varaction=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);
}
}
使用示例：
varhtmlAttributes=
[
{attrName:'class',attrValue:'样式名称'}//forIEs
,
{attrName:'className',attrValue:'样式名称'}//forff
]
vardomParams={domTag:'div',content:'动态div的innerHTML',otherAttributes:htmlAttributes};
varnewHtmlDom=dynCreateDomObject(domParams);
//通过setAttribute('style','position:absolute.....................')
//的形式来指定style没有效果，只能通过如下形式,jiong
newHtmlDom.style.zIndex='8888';
newHtmlDom.style.position='absolute';
newHtmlDom.style.left='100px';
newHtmlDom.style.top='200px';