Recientemente, debido a las necesidades laborales, necesito crear dinámicamente un elemento DOM después de hacer clic en un elemento y mostrarlo. Por lo tanto, escribí algunas funciones JS relacionadas y las grabé aquí para hacer una nota:
/** //*Funciones relacionadas para crear dinámicamente DOM Elementos admite www.jcodecraeer.com*//** //*Obtenga el objeto DOM de un cierto elemento @obj's id cadena*/function getElement (obj) {return typeOf obj == 'string'? Document.getElementById (obj): obj; }/** //*Obtenga la posición de un objeto DOM de elemento @obj del elemento, o la identificación del elemento*/function getObjectPosition (obj) {obj = typeOf obj === 'string'? GetElement (obj): obj; if (! obj) {return; } var posición = ''; if (obj.getBoundingClientRect) // para IES {posicion = obj.getBoundingClientRect (); return {x: posicion.left, y: posicion.top}; } else if (document.getboxObjectFor) {posicion = document.getboxObjectFor (obj); return {x: posicion.x, y: posicion.y}; } else {posición = {x: obj.offsetleft, y: obj.offsettop}; var parent = obj.OffSetParent; while (parent) {posicion.x+= obj.offsetleft; posición.y+= obj.offsettop; parent = obj.OffSetParent; } posición de retorno; }}/** //*Evento de enlace dinámicamente para un objeto DOM @Otarget El objeto DOM del evento unido @seventType el nombre de evento unido, tenga en cuenta que el nombre del evento no se agrega, como 'Click' @fnhandler la función de controlador de eventos unida*/function addEveltler (oTarget, seventTypeType, fnhandler) {if (oToTarget.addeventLister) {) otarget.AdDeventListener (seventType, fnhandler, falso); } else if (oTarget.attachevent) // para IES {otarget.attachevent ("on" + seventType, fnhandler); } else {oTarget ["on" + sEventType] = fnHandler; }}/** //*Eliminar un evento de un objeto DOM @OTarget El objeto DOM del evento unido @seventType el nombre del evento límite, tenga en cuenta que el nombre del evento no se agrega, como 'Click' @fnhandler la función de controlador de eventos*/function RemoVeThandler (oTarget, sentTypeType, fnhandler) {if (oTarget.removeVentLister) {{{{{{{oTarget) {{{{{{{oTarget) {{{{{{{{oTarget) {{{{{{{{{oTarget) {{{{{{{{{{{{{oTarget) oT otarget.removeEventListener (SEVENTTYPE, FNHANDLER, FALSE)} else if (otarget.detachevent) // para if {otarget.detachevent (seventType, fnhandler); } else {oTarget ['on'+seventType] = undefined; }}/** //*Crear un objeto DOM dinámico @domparams es una expresión JSON de los atributos del objeto creado, que tiene los siguientes atributos: @ParentNode El elemento principal al que pertenece el objeto creado (puede ser el elemento ID o el objeto DOM) @domid La identificación del objeto creado @domtag el nombre de etiqueta del objeto creado, admite los elementos de diseño comunes usados, como las españas de divival, como las españas de divives, como las españas de diviv, no se admiten las españas de diviv, pero no logra, pero no logra, pero el nombre de la etiqueta, pero no logra el nombre de la etiqueta. input/form, @content The created object content @otherAttributes Add other attributes except the necessary attributes for the function to be created, such as [{attrName:'style.color',attrValue:'red'}] @eventRegisters Add events to the created object, similar to arrays similar to [{eventType:'click',eventHandler:adsfasdf}] - After combination, this parameter has the siguiente forma: {parentNode: document.body, domtag: 'div', content: 'this se prueba', otrosattributes: [{attrName: 'style.color', attrValue: 'rojo'}], eventRregisters: [{eventType: 'click', eventHandler: fnhandler}]} */ function dincreatedomjectedomject (dominparams) {{ if (getElement (domparams.domid)) {childNodeAction ('eliminar', domparams.parentnode, domparams.domid); } var dynobj = document.createElement (domparams.domtag); con (Dynobj) {// ID también se puede pasar a través de Otherattributes, pero debido a la especialidad de la ID, el objeto // json todavía se usa aquí, y el atributo de ID DOM se adjunta a id = domparams.domid; innerhtml = domparams.content; // Innerhtml es un atributo DOM, mientras que ID, etc. son atributos de elementos, preste atención a la diferencia}/** //*agregue atributo*/if (null! = domparams.otherattributes) {for (var i = 0; i <domparams.othertributes.length; i ++) {var otherTtribute = domparams.otherattributes [i I]; dynobj.SetAttribute (OTRYATTRIBUTE.ATTRNAME, OTRYATTRIBUTE.ATTRVALUE); }}/** //*End Agregar atributo*/** //*Agregar eventos relacionados*/if (null! = domparams.eventregisters) {for (var i = 0; i <domparams.eventregisters.length; i ++) {var eventRegister = domparams.eventRregisters [i]; addEventhandler (Dynobj, eventRegister.eventType, eventRegister.eventhandler); }}/** //*End agrega eventos relacionados*/try {childNodeAction ('append', domparams.parentnode, dynobj); } catch ($ e) {} return dynobj; }/** // ** Eliminar nodos infantiles del nodo principal @ActionType es predeterminado a agregar, ingrese la cadena APCENDE | Eliminar @ParentNode El objeto DOM del nodo principal, o la ID del nodo principal @ChildNode se eliminó el objeto DOM del nodo infantil o la identificación del nodo infantil se eliminó */ function ChildNodeAction (ActionType, ParentNode, ChildNode) {if (! ParentNode) {return; } parentNode = typeof parentNode === 'string'? getElement (parentNode): parentNode; childNode = typeof childNode === 'string'? GetElement (ChildNode): ChildNode; if (! parentNode || if (null == ActionType || Action.length <= 0 || Action == 'Append') {Action = 'ParentNode.AppendChild'; } else {action = 'parentNode.remoVechild'; } try {eval (acción) (ChildNode); } catch ($ e) {alert ($ e.message); }}Ejemplo de uso:
var htmlattributes = [{attrName: 'class', attrValue: 'style name'} // para ies, {attrname: 'classname', attrValue: 'style name'} // para ff] var domparams = {domtag: 'div', content: 'div' innerhtml of Dynamic div ', otrosattributes: httmlattmlatml. var newhtmldom = DynCreateDomObject (domparams); // Especifique el estilo a través del formulario setAttribute ('estilo', 'posición: absoluto ............') // no tiene efecto. Solo se puede hacer mediante la siguiente forma, jiongnewhtmldom.style.zindex = '8888'; newhtmldom.Style.Position = 'Absolute'; newhtmldom.style.left = '100px'; newhtmldom.style.top = '200px'; newhtmldom.tyle.top = '200px';