Html-dom operation via JS dynamic display

Recently, because of the need to work, the need to create a DOM element dynamically after clicking on an element and display it, so write some relevant JS function, in this record, as a memo: carefully developed 5 UI front-end framework!

/**//* related functions that dynamically create DOM elements support www.jcodecraeer.com*//**//* get the DOM object of an element @obj the element's ID string */function getelement (obj) {ret Urn typeof obj== ' string '? document.getElementById (obj): obj;} /**//* gets the location of an element @obj the element's Dom object, or the element's 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;  }}/**//* dynamically binds an event to a DOM object @oTarget the DOM object of the bound event @sEventType the event name that is bound, note that the event name is not added, such as ' click ' @fnHandler the event handler that is bound */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 of the bound event @sEventType the event name that is bound, note that the event name is not added, such as ' click ' @fnHandler the event handler that is bound */funct Ion removeEventHandler (Otarget,seventtype,fnhandler) {if (Otarget.removeeventlistener) {Otarget.removeeventli Stener (Seventtype,fnhandler,false)} else if (otarget.detachevent)//for IEs {otarget.detachevent (sEventTy    Pe,fnhandler);    } else {otarget[' on ' +seventtype]=undefined; }}/**//* creates a dynamic DOM object @domParams is a JSON representation of the properties of the created object, 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 I of the object being created D @domTag the tag name of the object being created, supports common layout elements such as Div span, but does not support special elements such as Input\form @content the object content being created @otherAttributes adding the required properties of the function to the created object Other properties, such as [{ATTRNAme: ' Style.color ', AttrValue: ' Red '}] @eventRegisters add an event for the created object, like an array of [{eventtype: ' click ', EVENTHANDLER:ADSFASDF}] -After combining, the parameter has the following form: {parentnode:document.body,domtag: ' div ', content: ' This is the test ', Otherattributes:[{attrname: ' Style.color ', AttrValue: ' Red '}],eventregisters:[{eventtype: ' click ', eventhandler:fnhandler}]}*/function Dyncreatedomobject (Domparams) {if (GetElement (Domparams.domid)) {childnodeaction (' remove ', domparams.parentnode,do   MPARAMS.DOMID);       } var dynobj=document.createelement (Domparams.domtag);     With (dynobj) {//id can also be passed through otherattributes, but for the specificity of the ID, the//json object is still introduced here, and the DOM id attribute attachment Id=domparams.domid; Innerhtml=domparams.content; innerHTML is the DOM attribute, while the ID is the element attribute, note the difference}/**//* Add Property */if (null!=domparams.otherattributes) {for (Var i=0;i<dompar        ams.otherattributes.length;i++) {var otherattribute =domparams.otherattributes[i];      Dynobj.setattribute (Otherattribute.attrname,otherattribute.attrvalue);   }   }/**//*end Add Properties *//**//* Add Related events */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 Add related event */try {childnodeaction (' append ', domparams.parentnode,dynobj); } catch ($e) {} return dynobj;} /**//* Delete child nodes from parent node @actionType default 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 child node being deleted, or the Id*/function childnodeaction (actiontype) of the deleted child node,              Parentnode,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 example: Develop a 5-year UI front-end framework!

var htmlattributes= [{attrname: ' class ', AttrValue: ' Style name '}//for IEs, {attrname: ' ClassName ', attrval UE: ' style name '}//for FF] var domparams={domtag: ' Div ', content: ' Dynamic div innerhtml ', Otherattributes:htmlattri       Butes};       var newhtmldom=dyncreatedomobject (domparams); by setattribute (' style ', ' position:absolute ... ')//The form to specify the style has no effect, only by the form of the following, Jiong Newhtmldom       . style.zindex= ' 8888 ';       newhtmldom.style.position= ' absolute ';       newhtmldom.style.left= ' 100px '; newhtmldom.style.top= ' 200px ';

 

Html-dom operation via JS dynamic display