HTML DOM appendChild() Method

ตัวอย่าง

ท้ายรายการในรายการ:

var node = document.createElement("LI");                 // Create a <li> node
var textnode = document.createTextNode("Water");         // Create a text node
node.appendChild(textnode);                              // Append the text to <li>
document.getElementById("myList").appendChild(node);     // Append <li> to <ul> with id="myList"

ก่อนที่จะผนวก:

Coffee
Tea

หลังจากการผนวก:

Coffee
Tea
Water

ลองตัวเอง»

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

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

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

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

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

เคล็ดลับ: ใช้ insertBefore() วิธีการแทรกโหนดเด็กใหม่ก่อนที่ระบุไว้ที่มีอยู่โหนดเด็ก

สนับสนุนเบราว์เซอร์

ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่วิธีการ

วิธี
appendChild()	ใช่	ใช่	ใช่	ใช่	ใช่

วากยสัมพันธ์

node .appendChild( node )

ค่าพารามิเตอร์

พารามิเตอร์	ชนิด	ลักษณะ
node	Node object	จำเป็นต้องใช้ โหนดวัตถุที่คุณต้องการที่จะผนวก

รายละเอียดทางเทคนิค

กลับค่า:	วัตถุโหนดคิดเป็นโหนดท้าย
DOM รุ่น	ระดับแกนวัตถุ 1 โหนด

ตัวอย่างอื่น ๆ

ตัวอย่าง

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

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

ก่อนที่จะผนวก:

Coffee
Tea

Water
Milk

หลังจากการผนวก:

Coffee
Tea
Milk

Water

ลองตัวเอง»

ตัวอย่าง

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

var para = document.createElement("P");                       // Create a <p> node
var t = document.createTextNode("This is a paragraph.");      // Create a text node
para.appendChild(t);                                          // Append the text to <p>
document.getElementById("myDIV").appendChild(para);           // Append <p> to <div> with id="myDIV"

ลองตัวเอง»

ตัวอย่าง

สร้าง <p> องค์ประกอบที่มีข้อความบางส่วนและผนวกไปยังจุดสิ้นสุดของร่างกายเอกสาร:

var x = document.createElement("P");                        // Create a <p> node
var t = document.createTextNode("This is a paragraph.");    // Create a text node
x.appendChild(t);                                           // Append the text to <p>
document.body.appendChild(x);                               // Append <p> to <body>

ลองตัวเอง»