บทความนี้อธิบายถึงวิธีที่ JS ใช้การเพิ่มการแทนที่และการลบองค์ประกอบโหนด แบ่งปันสำหรับการอ้างอิงของคุณดังนี้:
ฉันมักจะสับสนเกี่ยวกับการทำงานของโหนดโดยเฉพาะอย่างยิ่งหลังจากแทรกเข้าไปในโหนดบางอย่าง ไม่มีวิธีการดังกล่าว ฉันมีปัญหากับวิธีการที่ฉันเขียนมาก่อน ฉันควรใส่โหนดใหม่ลงในโหนดเก่าหรือไม่? หรือฉันควรใช้วิธีการแทรกก่อนที่จะนำไปใช้
นี่คือวิธีการ:
<! doctype html สาธารณะ "-// w3c // dtd html 4.01 transitional // en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> แทรก </title> </head> <body onload = "InsertMessageFter ()"> <p id = "p1"> Hello World </p> </body> </html> <script> ฟังก์ชั่นลบฟังก์ชั่น () {var op = document.getElementByIdx_x ("p1"); //document.body.removechild(op); //op.parentNode ส่งคืนโหนดคลาสพาเรนต์ op.parentNode.removeChild (OP); } function replaceMessage () {var newop = document.createElement_x ("P"); newOp.AppendChild (document.createtextNode ("Hello Java")); //alert( newop.innerhtml); var oldop = document.getElementByIdx_x ("P1"); //document.body.removechild(op); //op.parentNode ส่งคืนคลาสพาเรนต์โหนด Oldop.parentNode.replacechild (Newop, Oldop); //document.body.replacechild( newop,oldop)} ฟังก์ชั่น insertMessageBefore () {var newop = document.createElement_x ("P"); newOp.AppendChild (document.createtextNode ("Hello Java")); var oldop = document.getElementByIdx_x ("P1"); oldop.parentnode.insertbefore (Newop, Oldop); } function insertMessageFter () {var newOp = document.createElement_x ("P"); newOp.AppendChild (document.createtextNode ("Hello Java")); var oldop = document.getElementByIdx_x ("P1"); insertfter (Newop, Oldop); } ฟังก์ชั่น insertBefore (newNode, oldNode) {oldNode.parentNode.insertBefore (newNode, oldNode); } function insertfter (newNode, oldNode) {// ตัดสินว่ามีแท็กของหมวดหมู่เดียวกันหลังจาก oldNode var nextNode = oldNode.nextSibling; ถ้า (nextNode) {// ถ้าไม่เป็นโมฆะมันเป็นเท็จถ้ามีมันเป็น oldNode.parentNode.insertBefore (newNode, nextNode); } else {oldNode.parentNode.AppendChild (newNode); }} </script>สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาที่เกี่ยวข้องกับ JavaScript โปรดตรวจสอบหัวข้อของไซต์นี้: "บทสรุปของ JavaScript Operation Skills", "บทสรุปของเทคนิคการดำเนินการทดแทน JavaScript", "สรุปเทคนิคการดำเนินการถ่ายโอน JavaScript" "สรุปทักษะอัลกอริทึมการค้นหา JavaScript", "บทสรุปของเอฟเฟกต์และเทคนิคการเคลื่อนไหวของ JavaScript", "บทสรุปของข้อผิดพลาดของ JavaScript และเทคนิคการดีบัก", "สรุปโครงสร้างข้อมูล JavaScript และเทคนิคการสรุป"
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน