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