函数支持 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,fnHandler) { if(oTarget.removeEventListener) { oTarget.removeEventListener(sEventType,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等，但不支持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}]}
*/
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',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);
}
}

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