วิธีการ insertBefore

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

โครงสร้าง

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

ตัวอย่าง

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

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

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

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

parent.insertBefore(p, before);

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

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

ตัวอย่าง

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

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

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

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

parent.insertBefore(p, parent.firstElementChild);

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

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

ตัวอย่าง

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

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

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

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

parent.insertBefore(p, parent.firstChild);

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

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

ดูเพิ่มเติม

วิธีการ prepend,
ซึ่งแทรกองค์ประกอบไปที่จุดเริ่มต้น
วิธีการ appendChild,
ซึ่งแทรกองค์ประกอบไปที่ส่วนท้ายขององค์ประกอบพ่อแม่
วิธีการ insertAdjacentElement,
ซึ่งแทรกองค์ประกอบไปยังตำแหน่งที่กำหนด
วิธีการ insertAdjacentHTML,
ซึ่งแทรกแท็กไปยังตำแหน่งที่กำหนด