Use javascript to dynamically create an htmlDOM element and display _ javascript skills

After clicking an element, You need to dynamically create a DOM element and display it. Therefore, you have written some related js functions. This record shows that due to work needs, you need to click an element, a dom element is dynamically created and displayed. Therefore, some related JS functions are written, which are recorded here for memo:

/** // * Functions related to the dynamic creation of DOM elements support www.jcodecraeer.com * // ** // * to obtain the DOM object @ obj of an element. */function getElement (obj) {return typeof obj = 'string '? Document. getElementById (obj): obj;}/** // * get the position of an element @ obj the DOM object of this element, or the ID of this element */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; posit Ion. y + = obj. offsetTop; parent = obj. offsetParent;} return position;}/** // dynamically binds the event @ oTarget to the event bound to a DOM object. Note that, the event name without the on parameter, such as the event processing function bound to 'click' @ fnHandler */function addEventHandler (oTarget, sEventType, fnHandler) {if (oTarget. addEventListener) {oTarget. addEventListener (sEventType, fnHandler, false);} else if (oTarget. attachEvent) // for IEs {oTarget. attachEvent ("on" + sE VentType, fnHandler);} else {oTarget ["on" + sEventType] = fnHandler ;}} /** // * remove the DOM object @ sEventType bound to an event from a DOM object. Note that the event name on is not added, for example, 'click' @ fnHandler is bound to the event processing function */function removeEventHandler (oTarget, sEventType, fnHandler) {if (oTarget. removeEventListener) {oTarget. removeEventListener (sEventType, fnHandler, false)} else if (oTarget. detachEvent) // for IEs {oTarget. detachEvent (s EventType, fnHandler);} else {oTarget ['on' + sEventType] = undefined ;}} /** // * create a dynamic DOM object @ domParams is a JSON expression of the property of the created object. It has the following attributes: @ parentNode the parent element (which can be an element ID or DOM object) of the created object @ domId ID of the created object @ domTag the tag Name of the created object, supports common layout elements, such as p span, however, special elements such as input \ form @ content are not supported. @ otherAttributes adds other attributes except the required attributes of the function for the created object, such as [{attrName: 'style. color ', attrValue: 'red'}] @ eventRegisters adds an event for the created object, similar to [{eventType: 'click', event Array of Handler: adsfasdf}]-after combination, this parameter has the following form: {parentNode: document. body, domTag: 'P', content: 'This is the tested', otherAttributes: [{attrName: 'style. color ', attrValue: 'red'}], eventRegisters: [{eventType: 'click', eventHandler: fnHandler}]} */function dynCreateDomObject (domParams) {if (getElement (domParams. domId) {childNodeAction ('delete', domParams. parentNode, domParams. domId);} var dynObj = document. createElement (domParams. DomTag); with (dynObj) {// id can also be passed in through otherAttributes. However, due to the special nature of the ID, The // JSON object is still used here, and the dom id attribute attachment id = domParams. domId; innerHTML = domParams. content; // innerHTML is the DOM attribute, and id is the element attribute. Note the difference.}/** // * Add attribute */if (null! = DomParams. otherAttributes) {for (var I = 0; I
 
  

  
Example:
  

  
Var htmlAttributes = [{attrName: 'class', attrValue: 'style name'} // for IEs, {attrName: 'classname', attrValue: 'style name'} // for ff] var domParams = {domTag: 'P', content: 'innerhtml of dynamic p ', otherAttributes: htmlAttributes }; var newHtmlDom = dynCreateDomObject (domParams); // use setAttribute ('style', 'position: absolute ..................... ') // format to specify the style has no effect, only through the following form, jiongnewHtmlDom. style. zIndex = '20140901'; newHtmlDom. style. position = 'absolute '; newHtmlDom. style. left = '100px '; newHtmlDom. style. top = '200px ';