Kürzlich muss ich aufgrund von Arbeitsbedürfnissen ein DOM -Element dynamisch erstellen, nachdem ich auf ein Element geklickt und anmelden kann. Deshalb habe ich einige verwandte JS -Funktionen geschrieben und sie hier aufgezeichnet, um ein Memo zu machen:
/** //*Verwandte Funktionen zum dynamischen Erstellen von DOM -Elementen unterstützen www.jcodecraeer.com*//** //*das DOM -Objekt eines bestimmten Elements @objs id String*/function getElement (obj) {return typeof obj == 'String'? }/** //*Die Position eines Elements @obj DOM -Objekt des Elements oder die ID des Elements*/Funktion getObjectPosition (obj) {obj = typeof obj == 'String'? GetElement (OBJ): OBJ; if (! obj) {return; } var Position = ''; if (obj.getBoundingClientRect) // für 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 (übergeordnet) {Position.x+= obj.offsetleft; Position.y+= obj.offsettop; Eltern = Obj.OffsetParent; } Rückgabeposition; }}/** //*Binden Sie das Ereignis für ein DOM -Objekt @Otarget das DOM -Objekt des gebundenen Ereignisses @seventType Der gebundene Ereignisname beachten Sie, dass der Ereignisname nicht hinzugefügt wird, wie z. otarget.adDeVentListener (siebtype, fnhandler, false); } else if (otarget.attachEvent) // für ies {otarget.attachEvent ("on" + siebtype, fnhandler); } else {otarget ["on" + seventType] = fnhandler; }}/** //*Entfernen Sie ein Ereignis aus einem DOM -Objekt @Otarget Das DOM -Objekt des gebundenen Ereignisses @seventType Der gebundene Ereignisname wird der Ereignisname nicht hinzugefügt, wie z. otarget.removeEventListener (siebtype, fnhandler, false)} else if (otarget.detAchEvent) // für ies {otarget.detAchEvent (siebtype, fnhandler); } else {otarget ['on'+seventType] = undefiniert; }}/** //*Erstellen eines dynamischen Dom -Objekts @Domparams ist ein JSON -Ausdruck der Attribute des erstellten Objekts, das die folgenden Attribute aufweist: @parentnode Das übergeordnete Element, zu Eingabe/Form, @Content Der erstellte Objektinhalt @OtherAttributes fügt andere Attribute hinzu, mit Ausnahme der erforderlichen Attribute für die zu erstellende Funktion, wie z. {parentNode: document.body, domtag: 'div', Inhalt: 'Dies wird getestet', Andere Attributes: [{attrname: 'style.color', attrValue: 'red'}], Eventregister: [{EventType: 'Click', EventHandler: fnhandler}]} */ functionNeatedomoneatedomoneatedel (Domparams) {{}} */ function Dyncreeation (Domparams) {{}} */ function Dyncreeation (Domparams) (Domparams) {{}} */ functionNeatedomoneated. if (getElement (domparams.domid)) {childnodeAction ('remove', domparams.parentnode, domparams.domid); } var dynobj = document.createelement (Domparams.domtag); Mit (Dynobj) {// ID kann auch über andere Attributes übergeben werden, aber aufgrund der Spezialität der ID wird das // JSON -Objekt hier noch verwendet, und das DOM -ID -Attribut wird an id = domparams.domid angehängt; Innerhtml = DomParams.content; // Innerhtml ist ein DOM -Attribut, während ID usw. Elementattribute sind, achten Sie auf den Differenz}/** //*Attribut hinzufügen*/if (null! = domparams.otherAtributes) {für (var i = 0; i <domparams.Overattributes.Length; i ++) {var is otheratTribute = domparams.otherattributes [i]; dynobj.setattribute (otherAttribute.attrName, otherAttribute.attrValue); }}/** //*Ende hinzufügen Attribut add*//** //*Verwandte Ereignisse hinzufügen*/if (null! AddEventHandler (Dynobj, Eventregister.EventType, Eventregister.EventHandler); }}/** //*Ende zu verwandten Ereignissen hinzufügen*/try {childnodeAction ('append', domparams.parentnode, dynobj); } catch ($ e) {} return dynobj; }/** // ** untergeordneten Knoten aus dem übergeordneten Knoten @ActionType -Standard -Anhängen löschen, geben Sie Zeichenfolge an append | Entfernen Sie @parentnode Das DOM -Objekt des übergeordneten Knotens, oder die ID des übergeordneten Knotens @Childnode Das DOM -Objekt des untergeordneten Knotens wurde gelöscht oder die ID des untergeordneten Knotens wurde gelöscht */ function 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 {eval (action) (childnode); } catch ($ e) {alert ($ e.message); }}Beispiel der Nutzung:
var htmlattributes = [{attrName: 'class', attrValue: 'Stilname'} // für ies, {attrname: 'classname', attrValue: 'Stilname'} // für ff] var domparams = {domtag: 'divs', content: htmtml von 'divnhtml von', innerHtml von dynamics von dynamics ', soottributes:' innerhtml von dynamics von dynamics ', soottributes:' innerhtml von dynamics von dynamics ', soottributes:' innerhtml von dynamics von dynamics ', soottributes: htmtmtml von dynamics von dynamics', shtmtm; var Newhtmldom = dynCreateDomObject (Domparams); // Geben Sie den Stil durch das Formular setAttribute an ('Stil', 'Position: Absolut ............') // hat keine Wirkung. Es kann nur durch die folgende Form erfolgen, Jiongnewhtmldom.Style.zindex = '8888'; Newhtmldom.Style.Position = 'Absolute';