วิธีการ insertBefore() ของ HTML DOM Element

คำนำออกและการใช้งาน

insertBefore() วิธีการส่งเข้าไปก่อนหน้าตัวเดียวในเมนูเดี่ยวกัน

ดูเพิ่มเติม:

วิธีการ appendChild()

วิธีการ replaceChild()

วิธีการ removeChild()

วิธีการ remove()

ตัวแปร childNodes

ตัวแปร firstChild

ตัวแปร lastChild

ตัวแปร firstElementChild

ตัวแปร lastElementChild

ตัวอย่าง

ตัวอย่าง 1

  1. สร้าง <li> ตัวเดียว
  2. สร้างตัวอย่างข้อความ
  3. ต่อข้อความไปที่ <li> ตัวเดียว
  4. ใส่ <ul> ก่อนหน้าเมื่อมี <li> ตัวเดียวในต้น
const newNode = document.createElement("li");
const textNode = document.createTextNode("น้ำ");
newNode.appendChild(textNode);
const list = document.getElementById("myList");
list.insertBefore(newNode, list.children[0]);

ทดลองด้วยตัวเอง

ตัวอย่าง 2

ย้ายอันดับขององค์ประกอบสุดท้ายจากหนึ่งรายการเข้าไปยังรายการอื่นที่ต้น:

const node = document.getElementById("myList2").lastElementChild;
const list = document.getElementById("myList1");
list.insertBefore(node, list.children[0]);

ทดลองด้วยตัวเอง

ตัวอย่าง 3

ย้ายอันดับขององค์ประกอบสุดท้ายจากหนึ่งรายการเข้าไปยังรายการอื่นที่ท้าย:

const node = document.getElementById("myList2").lastElementChild;
const list = document.getElementById("myList1");
list.insertBefore(node, null);

ทดลองด้วยตัวเอง

รูปแบบ

element.insertBefore(newnode, existingnode)

หรือ

node.insertBefore(newnode, existingnode)

ตัวแปร

ตัวแปร การอธิบาย
newnode จำเป็น
existingnode

ตัวเลือก

ถ้าไม่ได้กำหนด มีอยู่ insertBefore จะใส่ newnode ที่ท้าย

ค่าที่กลับมา

ประเภท การอธิบาย
ตัวไธยาสาร ตัวไธยาสารที่ถูกแทนที่

การสนับสนุนของเบราซเซอร์

element.insertBefore() เป็นคุณสมบัติของ DOM Level 1 (1998)

ทุกเบราซเซอร์ทุกตัวสนับสนุนมันอย่างเต็มที่:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
สนับสนุน 9-11 สนับสนุน สนับสนุน สนับสนุน สนับสนุน