Baru -baru ini, karena kebutuhan kerja, saya perlu secara dinamis membuat elemen DOM setelah mengklik elemen dan menampilkannya. Oleh karena itu, saya menulis beberapa fungsi JS terkait dan merekamnya di sini untuk membuat memo:
/** //*Fungsi Terkait untuk Membuat Dom Dukungan Dom Dinements Dinamis www.jcodecraeer.com*//** //*Dapatkan objek DOM dari elemen tertentu @Obj's ID String*/Function GetElement (OBJ) {return typeof obj == 'string'? Document.getElementById (obj): obj; }/** //*Dapatkan posisi elemen @objek DOM OBJ dari elemen, atau ID elemen*/fungsi getObjectPosition (obj) {obj = typeOf obj === 'string'? GetElement (obj): obj; if (! obj) {return; } var position = ''; if (obj.getBoundingClientRect) // untuk 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 induk = obj.offsetParent; while (Parent) {position.x+= obj.offsetleft; position.y+= obj.offsettop; induk = obj.offsetParent; } posisi kembali; }}/** //*Acara mengikat secara dinamis untuk objek DOM @otarget Objek DOM dari acara terikat @seventType nama acara terikat, perhatikan bahwa nama acara tidak ditambahkan, seperti 'klik' @fnHandler Fungsi event event bound*/function addeventhandler (OTarget, SeventType, fnhandler) {ifeDer. otarget.addeventListener (SeventType, fnhandler, false); } lain jika (otarget.attachevent) // untuk ies {otarget.attachevent ("on" + SeventType, fnhandler); } else {otarget ["on" + SeventType] = fnhandler; }}/** //*Hapus acara dari objek DOM @otarget Objek DOM dari acara terikat @seventType nama acara terikat, perhatikan bahwa nama acara tidak ditambahkan, seperti 'klik' @fnhandler fungsi handler event terikat*/function RemestEventhandler (otogover, SeventType, fnhandler) {if. Otarget.RemoveEventListener (SeventType, fnHandler, false)} lain jika (otarget.detachevent) // untuk ies {otarget.detachevent (SeventType, fnhandler); } else {otarget ['on'+SeventType] = tidak terdefinisi; }}/** //*Buat objek dom dinamis @domparams adalah ekspresi JSON dari atribut objek yang dibuat, yang memiliki atribut berikut: @parentnode elemen induk yang dimiliki oleh objek yang dibuat, tidak ada. Input/Form, @Content Konten objek yang dibuat @otherattributes menambahkan atribut lain kecuali atribut yang diperlukan untuk fungsi yang akan dibuat, seperti [{attrname: 'style.color', attrvalue: 'red'}] @eventregisters menambahkan peristiwa yang dibuat, mirip dengan array yang mirip dengan [eventsype: 'click' click 'click' Bentuk berikut: {ParentNode: document.body, domtag: 'div', konten: 'ini diuji', OtherAttributes: [{attrname: 'style.color', attrvalue: 'red'}], eventregisters: [{eventType: 'klik', eventHandler: fnhandler}]} {function/ function/ function/ function (eventType ', eventHandler: fnhandler} {eventType {eventType: fnhandler {fnhandler {fnhandler {fnhandler {fnhandler {fnhandler if (getElement (domParams.domid)) {childNodeAction ('rampai', domparams.parentnode, domparams.domid); } var dynobj = document.createElement (domParams.domtag); Dengan (Dynobj) {// ID juga dapat diteruskan melalui OtherAttributes, tetapi karena spesialisasi ID, objek // JSON masih digunakan di sini, dan atribut DOM ID dilampirkan ke ID = domParams.domid; innerHtml = domParams.content; // INNERHTML adalah atribut DOM, sedangkan ID dll adalah atribut elemen, perhatikan perbedaan}/** //*Tambahkan atribut*/if (null! = domParams.otherattributes) {for (var i = 0; i <domparams.otherattributes.length; i ++) {var var orterattribute = domparams.otherTributes.length; i ++) {var var OtherAttribute = domParams.otherTributes.length; i ++) {var var OtherAttribute = domParams.otherTributes.length; i ++) {var var OtherAttribute = domParams.otherTributes. dynobj.setAttribute (OtherAttribute.attrname, OtherAttribute.AttrValue); }}/** //*end ADD Tambahkan atribut*//** //*Tambahkan peristiwa terkait*/if (null! = domParams.eventregisters) {for (var i = 0; i <domparams.eventregisters.length; i ++) {var eventRegister = domparams.eventregisters [i]; addeventhandler (Dynobj, EventRegister.eventType, EventRegister.eventhandler); }}/** //*Akhiri Tambahkan Acara Terkait*/coba {ChildNodeAction ('Append', domParams.parentnode, dynobj); } catch ($ e) {} return dynobj; }/** // ** Hapus node anak dari node induk @actiontype default untuk ditambahkan, masukkan string append | Hapus @parentnode Objek DOM dari simpul induk, atau ID dari simpul induk @Childnode objek DOM dari simpul anak dihapus atau ID dari simpul anak dihapus */ fungsi 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'; } coba {eval (action) (childNode); } catch ($ e) {alert ($ e.message); }}Contoh Penggunaan:
var htmLattributes = [{attrname: 'class', attrvalue: 'gaya nama'} // for ies, {attrname: 'classname', attrvalue: 'nama gaya'} // untuk ff] var domParams = {domtag: 'div', konten: 'div' innerhtm; var newHtmldom = dyncreateDomObject (domParams); // Tentukan gaya melalui formulir setAttribute ('style', 'Position: Absolute ............') // tidak berpengaruh. Ini hanya dapat dilakukan dengan bentuk berikut, jiongnewhtmldom.style.zindex = '8888'; newhtmldom.style.position = 'absolute'; newhtmldom.style.left = '100px'; newhtmldom.style.style.top = '200px';