Récemment, en raison des besoins en travail, je dois créer dynamiquement un élément DOM après avoir cliqué sur un élément et l'afficher. Par conséquent, j'ai écrit quelques fonctions JS connexes et les ai enregistrées ici pour faire une note:
/ ** // * Fonctions connexes pour la création dynamique des éléments DOM Prise en charge www.jcodecraeer.com * / / ** // * Obtenez l'objet Dom d'un certain élément @ ID d'OBJ * / fonction getElement (obj) {return typeof obj == 'String'? Document.getElementById (obj): obj; } / ** // * Obtenez la position d'un élément @ obj's DOM d'Obj de l'élément, ou l'ID de l'élément * / fonction getObjectPosition (obj) {obj = type OBJ === 'String'? GetElement (obj): obj; if (! obj) {return; } var position = ''; if (obj.getBoundingClientRect) // pour 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; } position de retour; }} / ** // * Événement de liaison dynamique pour un objet DOM @Otarget l'objet DOM de l'événement lié @seventType Le nom de l'événement lié, notez que le nom de l'événement n'est pas ajouté, tel que 'cliquez' cliquez otarget.addeventListener (SeventType, fnhandler, false); } else if (otarget.attachevent) // pour ies {otarget.attachevent ("on" + SeventType, fnHandler); } else {otarget ["on" + septintType] = fnHandler; }} / ** // * Supprimez un événement d'un objet DOM @Otarget l'objet Dom de l'événement lié @seventType Le nom de l'événement lié, notez que le nom de l'événement n'est pas ajouté, tel que 'cliquez sur' @fnhandler la fonction du gestionnaire d'événements Bound * / fonction SupporEventHandler (otarget otarget.reMoveEventListener (SeventType, fnhandler, false)} else if (otarget.detachevent) // pour ies {otarget.detachevent (septinttype, fnhandler); } else {otarget ['on' + septintType] = Undefined; }} / ** // * Créer un objet Dom Dom dynamique @DOMParams est une expression JSON des attributs de l'objet créé, qui a les attributs suivants: @parentNode L'élément parent est créé @domtag le nom de l'élément ou de l'objet DOM), mais ne supporte pas les éléments de mise en page courants, tels que les éléments de mise en page courants, tels que DIV SPANC, mais ne supporte pas les éléments de mise en page courants,, tels que DIV Span. entrée / form, @Content Le contenu de l'objet créé @AtherAttributes Ajouter d'autres attributs à l'exception des attributs nécessaires à la création de la fonction, tels que [{attrName: 'Style.Color', Attrvalue: 'Red'}] @EventRegist Formulaire suivant: {parentNode: document.body, domtag: 'div', contenu: 'This is Tested', autresattributes: [{attrname: 'style.color', attvalue: 'red'}], eventRegisters: [{eventType: 'click', eventHandler: fnHandler}]} * / function dyncremedomobRe if (getElement (domparams.Domid)) {childNodeAction ('retire', robparams.parentNode, dompparams.Domid); } var dynobj = document.CreateElement (domparams.domtag); avec (dynobj) {// id peut également être transmis par autre attribut, mais en raison de la spécialité de l'ID, l'objet // json est toujours utilisé ici, et l'attribut id Dom est attaché à id = robparams.Domid; innerhtml = robparams.content; // innerhtml est un attribut DOM, tandis que ID etc sont des attributs d'élément, faites attention à la différence} / ** // * Ajouter l'attribut * / if (null! = domparams.otherattributes) {for (var i = 0; i <dompparams.otherattributes.Length; i ++) {var alternative = domeparams.otherattrributes [i]; dynobj.setAttribute (autrettribute.attrname, autrettribute.attrvalue); }} / ** // * end Add Attribute * / / ** // * Ajouter des événements associés * / if (null! = robSarams.EventRegistres) {for (var i = 0; i <robparams.eventRegistres.length; i ++) {var eventEgregister = Dompars.EventRegistres [i]; addEventHandler (dynobj, eventEggister.eventType, eventEggister.eventHandler); }} / ** // * end Ajouter des événements connexes * / try {childNodeAction ('APPEND', domparams.parentNode, dynobj); } catch ($ e) {} return dynobj; } / ** // ** Supprimer les nœuds enfants du nœud parent @ActionType par défaut à ajouter, entrez la chaîne APPENDRE | supprimer @parentNode l'objet DOM du nœud parent, ou l'ID du nœud parent @ChildNode L'objet DOM du nœud enfant a été supprimé ou l'ID du nœud enfant a été supprimé * / fonction 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 = 'parentNode.removechild'; } try {evv (action) (childNode); } catch ($ e) {alert ($ e.Message); }}Exemple d'utilisation:
var htmlattributes = [{attname: 'class', attvalue: 'style name'} // for ies, {attName: 'className', attvalue: 'style name'} // for ff] var dynamics = {Domtag: 'div', contenu: 'div' innerhtml of dynamic div ', autre, autre: var newhtmldom = dyncreatedomObject (dompparams); // spécifiez le style via le formulaire setAttribute ('style', 'position: absolu ............') // n'a aucun effet. Cela ne peut être fait que par le formulaire suivant, jionnewhtmldom.style.zindex = '8888'; newhtmldom.style.position = 'absolue'; newhtmldom.style.left = '100px'; newhtmldom.style.top = '200px'; newhtmldom.style.top = '200px'; newhtmldom.style.top = '200PX';