องค์ประกอบ HTML DOM appendChild()

❮ ก่อนหน้า ❮ การอ้างอิง วัตถุองค์ประกอบ ถัดไป ❯

ตัวอย่าง

ผนวกรายการเข้ากับรายการ:

const node = document.createElement("LI");
const textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);

ก่อน:

Coffee
Tea

หลังจาก:

Coffee
Tea
Water

ย้ายรายการจากรายการหนึ่งไปยังอีกรายการหนึ่ง:

const node = document.getElementById("myList2").lastChild;
document.getElementById("myList1").appendChild(node);

ก่อน:

Coffee
Tea

Water
Milk

หลังจาก:

Coffee
Tea
Milk

Water

ตัวอย่างเพิ่มเติมด้านล่าง

ความหมายและการใช้งาน

วิธี การappendChild()ผนวกโหนดเป็นลูกสุดท้ายของโหนด

เคล็ดลับ:ถ้าคุณต้องการสร้างย่อหน้าใหม่โดยใช้ข้อความ อย่าลืมสร้างข้อความเป็นโหนดข้อความที่คุณผนวกเข้ากับย่อหน้าจากนั้นจึงผนวกย่อหน้าลงในเอกสาร

คุณยังสามารถใช้วิธีนี้เพื่อย้ายองค์ประกอบจากองค์ประกอบหนึ่งไปยังอีกองค์ประกอบหนึ่ง (ดู "ตัวอย่างเพิ่มเติม")

ดูสิ่งนี้ด้วย:

The Element firstChild Property

ทรัพย์สิน LastChild ขององค์ประกอบ

องค์ประกอบ insertBefore() Method

ไวยากรณ์

node.appendChild(node)

พารามิเตอร์

Parameter	Description
node	Required. The node to append.

คืนมูลค่า

พิมพ์	คำอธิบาย
โหนด	โหนดต่อท้าย

ตัวอย่างเพิ่มเติม

สร้าง <p> องค์ประกอบและผนวกเข้ากับ <div> องค์ประกอบ:

const para = document.createElement("p");
const node = document.createTextNode("This is a paragraph.");

para.appendChild(node);
document.getElementById("myDIV").appendChild(para);

สร้าง <p> องค์ประกอบและผนวกเข้ากับเนื้อหาของเอกสาร:

const para = document.createElement("P");
const node = document.createTextNode("This is a paragraph.");

para.appendChild(node);
document.body.appendChild(para);