องค์ประกอบ JavaScript HTML DOM (โหนด)
การเพิ่มและการลบโหนด (องค์ประกอบ HTML)
การสร้างองค์ประกอบ HTML ใหม่ (โหนด)
ในการเพิ่มองค์ประกอบใหม่ให้กับ HTML DOM คุณต้องสร้างองค์ประกอบ (โหนดองค์ประกอบ) ก่อน จากนั้นจึงผนวกเข้ากับองค์ประกอบที่มีอยู่
ตัวอย่าง
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const element = document.getElementById("div1");
element.appendChild(para);
</script>
ตัวอย่างที่อธิบาย
รหัสนี้สร้าง<p>องค์ประกอบใหม่:
const para = document.createElement("p");
ในการเพิ่มข้อความไปยัง<p>องค์ประกอบ คุณต้องสร้างโหนดข้อความก่อน รหัสนี้สร้างโหนดข้อความ:
const node = document.createTextNode("This is a new paragraph.");
จากนั้นคุณต้องผนวกโหนดข้อความเข้ากับ<p>องค์ประกอบ:
para.appendChild(node);
สุดท้าย คุณต้องผนวกองค์ประกอบใหม่เข้ากับองค์ประกอบที่มีอยู่
รหัสนี้พบองค์ประกอบที่มีอยู่:
const element = document.getElementById("div1");
รหัสนี้ผนวกองค์ประกอบใหม่เข้ากับองค์ประกอบที่มีอยู่:
element.appendChild(para);
การสร้างองค์ประกอบ HTML ใหม่ - insertBefore()
วิธี การappendChild()ในตัวอย่างก่อนหน้านี้ ผนวกองค์ประกอบใหม่เป็นลูกคนสุดท้ายของผู้ปกครอง
หากคุณไม่ต้องการคุณสามารถใช้insertBefore()วิธีการ:
ตัวอย่าง
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const element = document.getElementById("div1");
const child = document.getElementById("p1");
element.insertBefore(para, child);
</script>
การลบองค์ประกอบ HTML ที่มีอยู่
หากต้องการลบองค์ประกอบ HTML ให้ใช้remove()
วิธีการ:
ตัวอย่าง
<div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const elmnt = document.getElementById("p1");
elmnt.remove();
</script>
ตัวอย่างที่อธิบาย
เอกสาร HTML มี<div>องค์ประกอบที่มีโหนดย่อยสองโหนด (สอง<p>
องค์ประกอบ):
<div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
ค้นหาองค์ประกอบที่คุณต้องการลบ:
const elmnt = document.getElementById("p1");
จากนั้นรันเมธอด remove() บนองค์ประกอบนั้น:
elmnt.remove();
วิธี การremove()นี้ใช้ไม่ได้ในเบราว์เซอร์รุ่นเก่า ดูตัวอย่างด้านล่างเกี่ยวกับวิธีการใช้งาน
removeChild()แทน
การลบโหนดย่อย
สำหรับเบราว์เซอร์ที่ไม่รองรับremove()วิธีการนี้ คุณต้องค้นหาโหนดหลักเพื่อลบองค์ประกอบ:
ตัวอย่าง
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.removeChild(child);
</script>
ตัวอย่างที่อธิบาย
เอกสาร HTML นี้มี<div>องค์ประกอบที่มีโหนดย่อยสองโหนด (สอง<p>
องค์ประกอบ):
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
ค้นหาองค์ประกอบด้วยid="div1":
const parent = document.getElementById("div1");
ค้นหา<p>องค์ประกอบด้วยid="p1":
const child = document.getElementById("p1");
นำเด็กออกจากผู้ปกครอง:
parent.removeChild(child);
นี่คือวิธีแก้ปัญหาทั่วไป: ค้นหาเด็กที่คุณต้องการลบ และใช้
parentNodeคุณสมบัติเพื่อค้นหาพาเรนต์:
const child = document.getElementById("p1");
child.parentNode.removeChild(child);
การแทนที่องค์ประกอบ HTML
ในการแทนที่องค์ประกอบเป็น HTML DOM ให้ใช้replaceChild()วิธีการ:
ตัวอย่าง
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>