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

Source: Internet
Author: User
Tags 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:

/**//* 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); 
else {position={x:obj.offsetleft,y:obj.offsettop}; 
var parent=obj.offsetparent; 
while (parent) {position.x+=obj.offsetleft; 
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 '), 

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

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.