JS method for dynamically creating DOM elements

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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5, 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 11 9 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148-149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176-177

/* The correlation function support for dynamically creating DOM elements *//* Gets the ID string of the element @obj the DOM object of an element/function getelement (obj) {return typeof obj== ' string '? Document . getElementById (obj): obj; /* * Gets the position of an element @obj the DOM object of that element, or the 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; }///////////////-Bind the event to a DOM object to dynamically bind the event @oTarget the DOM object @sEventType the bound event name, note that the event name is not on, such as ' click ' @fnHandler the bound event handler/function add EventHandler (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 ' + SEven Ttype] = Fnhandler; }/* Remove an event from a DOM object @oTarget the DOM object @sEventType the bound event name, and note that the event name is not on, such as ' click ' @fnHandler the bound event handler/function re Moveeventhandler (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}} /* Create 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 created object, which supports commonly used layout elements such as Div span, but does not support special elements such as Inputform @content the content of the object being created @otherAttributes add additional attributes other than the required function for the object being created, such as [{ Attrname: ' Style.color ', AttrValue: ' Red '} @eventRegisters add an event for the object being created, similar to [{eventtype: ' click ', EVENTHANDLER:ADSFASDF Array-After being combined, 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,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 attribute, and the ID is the element attribute, note the difference}/* Add attribute/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 Add attribute/* Add related Event/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 events/try {childnodeaction (' append ', domparams.parentnode,dynobj);} CATCH ($e) {} return dynobj; /* Delete child nodes from parent node @actionType default is 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=actiontype.tolowercase (); if (Null==actiontype | | action.length<=0 | | | action== ' append ') {action= ' parentnode.appendchild ';} else {action= ' pare Ntnode.removechild '; }   try {eval (action) (Childnode);} catch ($e) {alert ($e. message);}}

Use examples:

1 2 3 4 5 6 7 8 9 10 11 12 13-14

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

I hope this article will help you with your JavaScript programming.