/**//* 
动态创建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等，但不支持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\',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); 
} 
} 

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