Dynamically create an html DOM element through JS and display it

/**//*
 Support for dynamically creating related functions for DOM elements
 
 */ 
/**//*
 Get the DOM object with an element
 @obj The ID string of the element
 */ 
function getElement(obj) 
{ 
return typeof obj=='string'?(obj):obj; 
} 
/**//*
 Get the location of an element
 @obj DOM object of the element, or the ID of the element
 */ 
function getObjectPosition(obj) 
{ 
obj=typeof obj==='string'?getElement(obj):obj; 
if(!obj) 
{ 
return; 
} 
var position=''; 
if() //For IEs 
{ 
position=(); 
return {x:,y:}; 
} 
else if() 
{ 
position=(obj); 
return {x:,y:}; 
} 
else 
{ 
position={x:,y:}; 
var parent=; 
while(parent) 
{ 
+=; 
+=; 
parent=; 
} 
return position; 
} 
} 
/**//*
 Dynamically bind events for a DOM object
 @oTarget DOM object of bound event
 @sEventType The bound event name, note that the event name without adding on is, such as 'click'
 @fnHandler The bound event handler function
 */ 
function addEventHandler(oTarget, sEventType, fnHandler) 
{ 
if () 
{ 
(sEventType, fnHandler, false); 
} 
else if () //for IEs 
{ 
("on" + sEventType, fnHandler); 
} 
else 
{ 
oTarget["on" + sEventType] = fnHandler; 
} 
} 
/**//*
 Remove an event from a DOM object
 @oTarget DOM object of bound event
 @sEventType The bound event name, note that the event name without adding on is, such as 'click'
 @fnHandler The bound event handler function
 */ 
function removeEventHandler(oTarget,sEventType,fnHandler) 
{ 
if() 
{ 
(sEventType,fnHandler,false) 
} 
else if() //for IEs 
{ 
(sEventType,fnHandler); 
} 
else 
{ 
oTarget['on'+sEventType]=undefined; 
} 
} 

/**//*
 Create dynamic DOM objects
 @domParams is a JSON expression of the attributes of the created object, which has the following properties:
 @parentNode The parent element to which the created object belongs (can be element ID or DOM object)
 @domId The ID of the object being created
 @domTag The tag name of the created object, supports commonly used layout elements, such as div span, etc., but does not support special elements such as input\form
 @content The created object content
 @otherAttributes Add other attributes to the created object except the required attributes of the function, such as [{attrName:'',attrValue:'red'}]
 @eventRegisters Add events to the created object, an array similar to [{eventType:'click',eventHandler:adsfasdf}]
 -After combining, the parameter has the following form:
 {parentNode:,domTag:'div',content:'This is tested',otherAttributes:[{attrName:'',attrValue:'red'}],eventRegisters:[{eventType:'click',eventHandler:fnHandler}]}
 */ 
function dynCreateDomObject(domParams) 
{ 
if(getElement()) 
{ 
childNodeAction('remove',,); 
} 

var dynObj=(); 

with(dynObj) 
{ 
//id can also be passed in through otherAttributes, but due to the speciality of ID, it is still used here//JSON object is passed in and attached with DOM ID attributeid=; 
innerHTML=; //innerHTML is a DOM attribute, while id etc. are element attributes, pay attention to the difference} 
/**//*Add attributes*/ 
if(null!=) 
{ 
for(var i=0;i<;i++) 
{ 
var otherAttribute =[i]; 
(,); 
} 
} 
/**//*end Add attribute*/ 
/**//*Add related events*/ 
if(null!=) 
{ 
for(var i=0;i<;i++) 
{ 
var eventRegister =[i]; 
addEventHandler(dynObj,,); 
} 
} 
/**//*end Add related events*/ 
try 
{ 
childNodeAction('append',,dynObj); 
} 
catch($e) 
{ 

} 

return dynObj; 
} 
/**//*
 Delete child nodes from parent node
 @actionType defaults to append, input string append | remove
 @parentNode The DOM object of the parent node, or the ID of the parent node
 @childNode The DOM object of the deleted child node or the ID of the deleted child node
 */ 
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=(); 
if( null==actionType || <=0 || action=='append') 
{ 
action=''; 
} 
else 
{ 
action=''; 
} 

try 
{ 
eval(action)(childNode); 
} 
catch($e) 
{ 
alert($); 
} 
} 

var htmlAttributes= 
[

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

,

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

] 

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

var newHtmlDom=dynCreateDomObject(domParams);

//By setAttribute('style','position:absolute............')
The // form to specify style has no effect, and can only be used in the following form, jiong
='8888';

='absolute';

='100px';

='200px';