วิธีการ insertBefore

วิธีการ insertBefore ช่วยให้สามารถแทรก องค์ประกอบก่อนองค์ประกอบอื่น ส่วนใหญ่แล้ว ใช้หลังจากสร้างองค์ประกอบด้วยวิธีการ createElement วิธีการนี้ใช้กับองค์ประกอบพ่อแม่ขององค์ประกอบ ที่ต้องการแทรกข้างหน้า

โครงสร้าง

javascriptพ่อแม่.insertBefore(องค์ประกอบ, แทรกก่อนใคร);

ตัวอย่าง

สร้างย่อหน้าแล้ววางไว้ก่อนย่อหน้าที่สอง:

html<div id="parent">
  <p>องค์ประกอบ 1</p>
  <p id="before">องค์ประกอบ 2</p>
  <p>องค์ประกอบ 3</p>
</div>

javascriptlet parent = document.querySelector('#parent');
let before = document.querySelector('#before');

let p = document.createElement('p');
p.textContent = '!';

parent.insertBefore(p, before);

ผลลัพธ์ของการรันโค้ด:

html<div id="parent">
  <p>องค์ประกอบ 1</p>
  <p>!</p>
  <p>องค์ประกอบ 2</p>
  <p>องค์ประกอบ 3</p>
</div>

ตัวอย่าง

เพิ่มย่อหน้าไปที่จุดเริ่มต้นขององค์ประกอบ #parent โดยการแทรกย่อหน้าของเราก่อนองค์ประกอบลูกตัวแรก ของ #parent องค์ประกอบลูกตัวแรกนี้สามารถ หาได้โดยใช้ firstElementChild:

html<div id="parent">
  <p>องค์ประกอบ 1</p>
  <p>องค์ประกอบ 2</p>
</div>

javascriptlet parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.insertBefore(p, parent.firstElementChild);

ผลลัพธ์ของการรันโค้ด:

html<div id="parent">
  <p>!</p>
  <p>องค์ประกอบ 1</p>
  <p>องค์ประกอบ 2</p>
</div>

ตัวอย่าง

เมื่อส่งพารามิเตอร์ที่สองเป็น null วิธีการ insertBefore จะทำงานเหมือน appendChild ในขณะเดียวกัน ถ้าในองค์ประกอบไม่มีองค์ประกอบลูก firstElementChild จะคืนค่าเป็น null ดังนั้น การเพิ่มไปที่จุดเริ่มต้นขององค์ประกอบ สามารถทำได้แม้ในขณะที่องค์ประกอบนั้นยังไม่มีองค์ประกอบลูก:

html<div id="parent"></div>

javascriptlet parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.insertBefore(p, parent.firstChild);

ผลลัพธ์ของการรันโค้ด:

html<div id="parent">
  <p>!</p>
</div>

ดูเพิ่มเติม