เมธอด replaceChild() ของ DOM ใช้สำหรับแทนที่โหนดลูก (child node) ด้วยโหนดใหม่ในเอกสาร HTML
รูปแบบการใช้งาน (Syntax)
node.replaceChild(newNode, oldNode);
ตัวอย่างการใช้งาน
ตัวอย่างด้านล่างแสดงการใช้งานเมธอด replaceChild()
<!DOCTYPE html> <html> <head> <style> html{ height:100%; } body{ text-align:center; color:#fff; background: #ff7f5094; height:100%; } p{ font-weight:700; font-size:1.2rem; } ul{ list-style-type:none; padding:0; } .btn{ background:#0197F6; border:none; height:2rem; border-radius:2px; width:35%; margin:2rem auto; display:block; color:#fff; outline:none; cursor:pointer; } .show{ font-size:1.5rem; } </style> </head> <body> <h1>สาธิตเมธอด DOM replaceChild()</h1> <p>สวัสดี วิชาที่ผมชอบคือ:</p> <ul id="subjectList"> <li>ฟิสิกส์</li> <li id="chemistry">เคมี</li> <li>คณิตศาสตร์</li> <li>ภาษาอังกฤษ</li> </ul> <button onclick="changeSubject()" class='btn'>เปลี่ยนฟิสิกส์เป็นชีววิทยา</button> <script> function changeSubject() { var textnode = document.createTextNode("ชีววิทยา"); var list = document.getElementById("subjectList"); list.replaceChild(textnode, list.childNodes[0]); } </script> </body> </html>
ผลลัพธ์
โค้ดด้านบนจะให้ผลลัพธ์ดังนี้
คลิกที่ปุ่ม "สีน้ำเงิน" เพื่อแทนที่โหนดลูกแรกของรายการวิชา
