เมื่อเร็ว ๆ นี้เนื่องจากความต้องการในการทำงานฉันต้องสร้างองค์ประกอบ DOM แบบไดนามิกหลังจากคลิกที่องค์ประกอบและแสดง ดังนั้นฉันจึงเขียนฟังก์ชั่น JS ที่เกี่ยวข้องและบันทึกไว้ที่นี่เพื่อสร้างบันทึก:
/** //*ฟังก์ชั่นที่เกี่ยวข้องสำหรับการสร้างองค์ประกอบ DOM แบบไดนามิกสนับสนุน www.jcodecraeer.com*//** //*รับวัตถุ DOM ขององค์ประกอบบางส่วน @id id id id*/ฟังก์ชั่น GetElement (obj) {return typeof obj == 'สตริง' }/** //*รับตำแหน่งขององค์ประกอบ @obj ของวัตถุ DOM ขององค์ประกอบหรือ ID ขององค์ประกอบ*/ฟังก์ชัน getObjectPosition (obj) {obj = typeof obj === 'สตริง'? getElement (OBJ): obj; ถ้า (! obj) {return; } var position = ''; if (obj.getBoundingClientRect) // สำหรับ IES {position = obj.getBoundingClientRect (); return {x: position.left, y: position.top}; } อื่นถ้า (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; ในขณะที่ (parent) {position.x+= obj.offsetleft; position.y+= obj.offsettop; parent = obj.offsetParent; } ตำแหน่งคืน; }}/** //*การผูกเหตุการณ์แบบไดนามิกสำหรับวัตถุ DOM @OTARGET วัตถุ DOM ของเหตุการณ์ที่ถูกผูกไว้ @SeventType ชื่อเหตุการณ์ที่ถูกผูกไว้โปรดทราบว่าชื่อเหตุการณ์ไม่ได้ถูกเพิ่มเช่น 'คลิก' @fnhandler ฟังก์ชั่นตัวจัดการเหตุการณ์ที่ถูกผูกไว้ otarget.addeventListener (Seventtype, fnhandler, false); } อื่นถ้า (otarget.attachevent) // สำหรับ IES {otarget.attachevent ("on" + เจ็ด ttype, fnhandler); } else {otarget ["on" + seventtype] = fnhandler; }}/** //*ลบเหตุการณ์ออกจากวัตถุ DOM @OTARGET วัตถุ DOM ของเหตุการณ์ที่ถูกผูกไว้ @SeventType ชื่อเหตุการณ์ที่ถูกผูกไว้โปรดทราบว่าชื่อเหตุการณ์ไม่ได้ถูกเพิ่มเช่น 'คลิก' @fnhandler ฟังก์ชั่นตัวจัดการเหตุการณ์ที่ถูกผูกไว้*/ฟังก์ชั่น removeventhandler otarget.removeeVentListener (เจ็ดสิบปี, fnhandler, false)} อื่นถ้า (otarget.detachevent) // สำหรับ ies {otarget.detachevent (Seventtype, fnhandler); } else {otarget ['on'+seventtype] = undefined; }}/** //*สร้างวัตถุ DOM แบบไดนามิก @domparams คือนิพจน์ JSON ของแอตทริบิวต์ของวัตถุที่สร้างขึ้นซึ่งมีคุณสมบัติต่อไปนี้: @parentNode องค์ประกอบหลักที่วัตถุที่สร้างขึ้น (สามารถเป็น id Element ID หรือ dom) @domid อินพุต/ฟอร์ม, @content เนื้อหาวัตถุที่สร้างขึ้น @otherattributes เพิ่มแอตทริบิวต์อื่น ๆ ยกเว้นแอตทริบิวต์ที่จำเป็นสำหรับฟังก์ชันที่จะสร้างเช่น [{attrName: 'style.color', attrvalue: 'สีแดง'}] @eventregisters เพิ่มเหตุการณ์ในวัตถุที่สร้างขึ้น แบบฟอร์มต่อไปนี้: {ParentNode: document.body, domtag: 'div', เนื้อหา: 'นี่คือการทดสอบ', otherattributes: [{attrName: 'style.color', attrvalue: 'red'}], eventregisters: [{eventtype: 'คลิก' if (getElement (domparams.domid)) {childnodeaction ('ลบ', domparams.parentnode, domparams.domid); } var dynobj = document.createElement (domparams.domtag); ด้วย (dynobj) {// id ยังสามารถส่งผ่านผ่าน otherattributes แต่เนื่องจากความพิเศษของ ID วัตถุ // json ยังคงใช้ที่นี่และแอตทริบิวต์ DOM ID ติดอยู่กับ id = domparams.domid; innerhtml = domparams.content; // innerhtml เป็นแอตทริบิวต์ DOM ในขณะที่ id ฯลฯ เป็นแอตทริบิวต์องค์ประกอบให้ความสนใจกับความแตกต่าง}/** //*เพิ่มแอตทริบิวต์*/ถ้า (null! = domparams.otherattributes) {สำหรับ (var i = 0; dynobj.setAttribute (otherattribute.attrname, otherattribute.attrvalue); }}/** //*จบแอตทริบิวต์*//** //*เพิ่มเหตุการณ์ที่เกี่ยวข้อง*/ถ้า (null! = domparams.eventRegisters) {สำหรับ (var i = 0; i <domparams.eventregisters.length; i ++) AddeventHandler (Dynobj, EventRegister.eventType, EventRegister.eventHandler); }}/** //*สิ้นสุดเพิ่มเหตุการณ์ที่เกี่ยวข้อง*/ลอง {ChildNodeaction ('ผนวก', domparams.parentNode, dynobj); } catch ($ e) {} return dynobj; }/** // ** ลบโหนดลูกจากโหนดพาเรนต์ @ActionType ค่าเริ่มต้นเพื่อผนวกป้อนสตริงต่อท้าย | ลบ @parentNode วัตถุ DOM ของโหนดพาเรนต์หรือ ID ของโหนดพาเรนต์ @ChildNode วัตถุ DOM ของโหนดลูกถูกลบหรือ ID ของโหนดลูกถูกลบ */ ฟังก์ชั่น childNodeaction } parentNode = typeof parentNode === 'สตริง'? 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 == 'ผนวก') {action = 'parentNode.AppendChild'; } else {action = 'parentNode.removeChild'; } ลอง {eval (action) (childNode); } catch ($ e) {แจ้งเตือน ($ e.message); -ตัวอย่างการใช้งาน:
var htmlattributes = [{attrName: 'class', attrvalue: 'ชื่อสไตล์'} // สำหรับ ies, {attrName: 'classname', attrvalue: 'ชื่อสไตล์'} // สำหรับ ff] var domparams = {domtag: var newhtmldom = dyncreatedomobject (domparams); // ระบุสไตล์ผ่านแบบฟอร์ม setattribute ('สไตล์', 'ตำแหน่ง: สัมบูรณ์ ............ ') // ไม่มีผล มันสามารถทำได้โดยแบบฟอร์มต่อไปนี้ jiongnewhtmldom.style.zindex = '8888'; newhtmldom.style.position = 'Absolute'; newhtmldom.style.left = '100px'; newhtmldom.style.top = '200px';