ตัวอย่าง
ใส่ใหม่ <li> องค์ประกอบก่อนองค์ประกอบลูกแรกของ <ul> องค์ประกอบ:
var newItem = document.createElement("LI"); // Create a <li> node
var textnode = document.createTextNode("Water"); // Create a text node
newItem.appendChild(textnode); // Append the text to <li>
var list =
document.getElementById("myList"); // Get the
<ul> element to insert a new node
list.insertBefore(newItem,
list.childNodes[0]); // Insert <li> before the first child of
<ul>ก่อนที่จะใส่:
- Coffee
- Tea
หลังจากใส่:
- Water
- Coffee
- Tea
ลองตัวเอง» เพิ่มเติม "Try it Yourself" ตัวอย่างด้านล่าง
ความหมายและการใช้งาน
insertBefore() วิธีการแทรกโหนดเป็นเด็กขวาก่อนที่เด็กมีอยู่ซึ่งคุณระบุ
เคล็ดลับ: หากคุณต้องการที่จะสร้างรายการใหม่ที่มีข้อความอย่าลืมที่จะสร้างข้อความเป็นโหนดข้อความที่คุณผนวกกับที่ <li> องค์ประกอบแล้วใส่ <li> ไปยังรายการ
นอกจากนี้คุณยังสามารถใช้วิธีการ insertBefore เพื่อแทรก / ย้ายองค์ประกอบที่มีอยู่ (See "More Examples")
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่วิธีการ
| วิธี | |||||
|---|---|---|---|---|---|
| insertBefore() | ใช่ | ใช่ | ใช่ | ใช่ | ใช่ |
วากยสัมพันธ์
ค่าพารามิเตอร์ พารามิเตอร์ ชนิด ลักษณะ newnode Node object จำเป็นต้องใช้ โหนดวัตถุที่คุณต้องการแทรก existingnode Node object ไม่จำเป็น. โหนดเด็กคุณต้องการแทรกโหนดใหม่ก่อน เมื่อไม่ได้ระบุวิธีการ insertBefore จะแทรก newnode ที่สิ้นสุด
รายละเอียดทางเทคนิค
กลับค่า: วัตถุโหนดคิดเป็นโหนดแทรก DOM รุ่น ระดับแกนวัตถุ 1 โหนด
ตัวอย่างอื่น ๆ
ตัวอย่าง
ย้าย <li> องค์ประกอบจากรายการหนึ่งไปยังอีก:
var node = document.getElementById("myList2").lastChild;
var
list = document.getElementById("myList1");
list.insertBefore(node, list.childNodes[0]); ก่อนที่จะใส่:
- Coffee
- Tea
- Water
- Milk
หลังจาก insertBefore:
- Milk
- Coffee
- Tea
- Water
ลองตัวเอง»