ใช้เมธอด HTML DOM appendChild() เพื่อสร้างและเพิ่มโหนดข้อความที่ส่วนท้ายของรายการโหนดย่อย นอกจากนี้ยังสามารถใช้เมธอด appendChild() เพื่อย้ายองค์ประกอบจากตำแหน่งปัจจุบันไปยังตำแหน่งใหม่ การใช้ appendChild() คุณสามารถเพิ่มค่าใหม่ลงในรายการและสามารถเพิ่มย่อหน้าใหม่ภายใต้ย่อหน้าอื่นได้
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับวิธี appendChild() -
node.appendChild( node )
ที่นี่ โหนดพารามิเตอร์คืออ็อบเจ็กต์ที่คุณต้องการผนวก เป็นค่าพารามิเตอร์บังคับ
ตัวอย่าง
ให้เราดูตัวอย่างของวิธี appendChild() -
<!DOCTYPE html>
<html>
<body>
<p>Click the button to create a paragraph and append it to the div</p>
<div id="SampleDIV">
A DIV element
</div>
<button onclick="AppendP()">Append</button>
<script>
var x=1;
function AppendP() {
var paragraph = document.createElement("P");
paragraph.innerHTML = "This is paragraph "+x;
document.getElementById("SampleDIV").appendChild(paragraph);
x++;
}
</script>
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
หลังจากคลิกผนวก 3 ครั้ง:−
ในตัวอย่างข้างต้น −
เราได้สร้าง div ด้วย id “SampleDIV” โหนดที่ต่อท้ายจะทำหน้าที่เป็นลูกของ div นี้
<div id="SampleDIV"> A DIV element </div>
จากนั้นเรามีปุ่มชื่อ "ผนวก" ซึ่งจะเรียกใช้ฟังก์ชัน AppendP()
<button onclick="AppendP()">Append</button>
ฟังก์ชัน AppendP() จะสร้างองค์ประกอบย่อหน้า (p) ขึ้นก่อนแล้วกำหนดให้กับย่อหน้าตัวแปร จากนั้นข้อความบางส่วนจะถูกเพิ่มลงในย่อหน้าโดยใช้ innerHTML และตัวแปร x ถูกผนวกเข้ากับข้อความ ตัวแปรนี้จะเพิ่มขึ้นทุกครั้งที่เราคลิกปุ่ม "ผนวก" ในที่สุดเราก็ต่อท้ายย่อหน้าที่สร้างขึ้นใหม่เป็นโหนดย่อยขององค์ประกอบ div -
var x=1;
function AppendP() {
var paragraph = document.createElement("P");
paragraph.innerHTML = "This is paragraph "+x;
document.getElementById("SampleDIV").appendChild(paragraph);
x++;
} 