Dynamically display html-DOM operations through JS

Dynamically display html-DOM operations through JS

Recently, due to work needs, you need to click an element to dynamically create a DOM element and display it. Therefore, you have written some relevant JS functions, which are recorded here for your note: well-developed 5-year UI front-end framework!

/** // * 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" + sEventT Ype, 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 (sEventType, 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 div 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 events to the created object, similar to [{eventType: 'click', eventHandler: Adsfasdf}] array-after combination, this parameter has the following form: {parentNode: document. body, domTag: 'div ', 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 attachment ID = domParams with the DOM id attribute is used. 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: carefully developed a five-year UI front-end framework!
  
Var htmlAttributes = [{attrName: 'class', attrValue: 'style name'} // for IEs, {attrName: 'classname', attrValue: 'style name'} // for ff] var domParams = {domTag: 'div ', content: 'innerhtml of dynamic div', otherAttributes: htmlAttributes }; var newHtmlDom = dynCreateDomObject (domParams); // use setAttribute ('style', 'position: absolute ..................... ') // format to specify the style has no effect, only through the following form, jiong newHtmlDom. style. zIndex = '20140901'; newHtmlDom. style. position = 'absolute '; newHtmlDom. style. left = '100px '; newHtmlDom. style. top = '200px ';