Metode insertBefore

Metode insertBefore memungkinkan untuk memasukkan elemen sebelum elemen lain. Paling sering digunakan setelah membuat elemen dengan createElement. Metode ini diterapkan pada induk dari elemen yang akan disisipkan di depannya.

Sintaks

induk.insertBefore(elemen, sebelum siapa dimasukkan);

Contoh

Mari buat paragraf dan letakkan sebelum paragraf kedua:

<div id="parent">
	<p>elem 1</p>
	<p id="before">elem 2</p>
	<p>elem 3</p>
</div>

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

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

parent.insertBefore(p, before);

Hasil eksekusi kode:

<div id="parent">
	<p>elem 1</p>
	<p>!</p>
	<p>elem 2</p>
	<p>elem 3</p>
</div>

Contoh

Mari tambahkan paragraf ke awal elemen #parent. Untuk melakukan ini, kita akan menyisipkan paragraf kita sebelum anak pertama dari #parent. Anak ini dapat ditemukan menggunakan firstElementChild:

<div id="parent">
	<p>elem 1</p>
	<p>elem 2</p>
</div>

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

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

parent.insertBefore(p, parent.firstElementChild);

Hasil eksekusi kode:

<div id="parent">
	<p>!</p>
	<p>elem 1</p>
	<p>elem 2</p>
</div>

Contoh

Saat parameter kedua null diteruskan, metode insertBefore bekerja seperti appendChild. Pada saat yang sama, jika elemen tidak memiliki elemen anak, firstElementChild mengembalikan null. Akibatnya, menambahkan ke awal elemen dapat dilakukan bahkan ketika tidak ada elemen anak di dalamnya:

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

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

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

parent.insertBefore(p, parent.firstChild);

Hasil eksekusi kode:

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

Lihat juga

metode prepend,
yang memasukkan elemen ke awal
metode appendChild,
yang memasukkan elemen ke akhir induk
metode insertAdjacentElement,
yang memasukkan elemen ke lokasi yang ditentukan
metode insertAdjacentHTML,
yang memasukkan tag ke lokasi yang ditentukan