JS method for dynamically creating DOM elements

Source: Internet
Author: User
Tags bind json tag name

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.