วิธี HTML DOM Element insertAdjacentElement()

คำอธิบายและวิธีใช้

insertAdjacentElement() วิธีการใส่องค์ประกอบเข้าไปในตำแหน่งที่กำหนด

ตำแหน่งที่สามารถใช้งานได้:

ค่า รายละเอียด
afterbegin หลังจากเริ่มต้นองค์ประกอบ (เด็กแรก)
afterend หลังองค์ประกอบ
beforebegin ก่อนองค์ประกอบ
beforeend ก่อนจบขององค์ประกอบ (เด็กสุดท้าย)

ตัวอย่าง

ตัวอย่าง 1

ใส่องค์ประกอบ span หลังจากหัวข้อ:

const span = document.getElementById("mySpan");
const h2 = document.getElementById("myH2");
h2.insertAdjacentElement("afterend", span);

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

ตัวอย่าง 2

ใช้ "afterbegin":

const span = document.getElementById("mySpan");
const h2 = document.getElementById("myH2");
h2.insertAdjacentElement("afterbegin", span);

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

ตัวอย่าง 3

ใช้ "beforebegin":

const span = document.getElementById("mySpan");
const h2 = document.getElementById("myH2");
h2.insertAdjacentElement("beforebegin", span);

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

ตัวอย่าง 4

ใช้ "beforeend":

const span = document.getElementById("mySpan");
const h2 = document.getElementById("myH2");
h2.insertAdjacentElement("beforeend", span);

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

การใช้งาน

element.insertAdjacentElement(position, element)

หรือ

node.insertAdjacentElement(position, element)

ตัวแปร

ตัวแปร รายละเอียด
position

จำเป็น ตำแหน่งขององค์ประกอบเกี่ยวข้องกับองค์ประกอบ:

  • afterbegin
  • afterend
  • beforebegin
  • beforeend
element เป็นสิ่งที่ต้องการใส่

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

ทุกเบราซเซอร์ทุกชุดเวอร์ชั่นเป็นไปได้ element.insertAdjacentElement()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
การสนับสนุน การสนับสนุน การสนับสนุน การสนับสนุน การสนับสนุน การสนับสนุน