Dynamically create an HTML DOM element through JS and display _javascript tips

Recently, because of work needs, by clicking on an element, dynamically create a DOM element and display, so write some related JS functions, in this record, to make a memo:

/**//* the correlation function that dynamically creates DOM elements supports www.jcodecraeer.com//**//* gets the ID string of an element's DOM object @obj the element/function getelement (obj) { 
Return typeof obj== ' string ' document.getElementById (obj): obj; /**//* gets the position of an element @obj the DOM object of the element, or the ID/function getobjectposition (obj) {obj=typeof obj=== ' string ' of the element? 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; 
}/**//* The event name that is bound for a DOM object that dynamically binds an event @oTarget the bound event @sEventType the event name that is not on, such as ' click ' @fnHandler the bound event handler. 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; 
}/**//* removes an event from a DOM object @oTarget the DOM object @sEventType the bound event name, noting that the event name is not on, such as ' click ' @fnHandler the bound event handler. 
function removeEventHandler (Otarget,seventtype,fnhandler) {if (Otarget.removeeventlistener) { Otarget.removeeventlistener (Seventtype,fnhandler,false)} else if (otarget.detachevent)//for IEs {OTarget.detachEven 
T (Seventtype,fnhandler); 
else {otarget[' on ' +seventtype]=undefined;  
/**//* creates a dynamic DOM object @domParams is the JSON expression of the property of the object being created, which has the following properties: @parentNode the parent element to which the object is created (either an element ID or a DOM object) @domId the ID of the object being created @domTag the tag name of the object being created, supports commonly used layout elements such as Div span, but does not support special elements such as Input\form @content the object content being created @otherAttributes Add additional properties to the created object other than the property required by the function, such as [{attrname: ' Style.color ', AttrValue: ' Red '}] @eventRegisters add events for the object being created, similar to [{eventtype: ' ClickArray of ', EVENTHANDLER:ADSFASDF}]-After being combined, the parameter has the following form: {parentnode:document.body,domtag: ' div ', content: ' This is a test ', 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); 
The WITH (dynobj) {//id can also be passed in Otherattributes, but for the specificity of the ID, the//json object is still passed in here and Id=domparams.domid with the DOM id attribute attachment; Innerhtml=domparams.content; innerHTML is the DOM property, and the ID is the element attribute, note the difference}/**//* add attribute/if (null!=domparams.otherattributes) {for (Var i=0;i<domparams.oth 
erattributes.length;i++) {var otherattribute =domparams.otherattributes[i]; 
Dynobj.setattribute (Otherattribute.attrname,otherattribute.attrvalue); }/**//*end Add Properties *//**//* Add related Event/if (null!=domparams.eventregisters) {for (Var i=0;i<domparams.eventregisters.l ength;i++) {var eventregister =dOmparams.eventregisters[i]; 
addEventHandler (Dynobj,eventregister.eventtype,eventregister.eventhandler); 
}}/**//*end add related Event/try {childnodeaction (' append ', domparams.parentnode,dynobj); 
catch ($e) {} return dynobj; /**//* deletes a child node from the 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,paren 


Tnode,childnode) {if (!parentnode) {return;} 
Parentnode=typeof parentnode=== ' string ' getelement (parentnode):p Arentnode; 
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); 

 } 
}

Use examples:

var htmlattributes= 
[

{attrname: ' class ', AttrValue: ' Style name '}//for IEs

,

{attrname: ' ClassName ', AttrValue: ' Style name '}//for ff

] 

var domparams={domtag: ' Div ', content: ' Dynamic div's innerHTML ', Otherattributes: Htmlattributes};

var newhtmldom=dyncreatedomobject (domparams);

The style has no effect through the form of setattribute (' style ', ' Position:absolute .... ... ')

//, which can only be done in the following form, Jiong

newhtmldom.style.zindex= ' 8888 ';

newhtmldom.style.position= ' absolute ';

newhtmldom.style.left= ' 100px ';

newhtmldom.style.top= ' 200px ';