Kaedah insertBefore

Kaedah insertBefore membolehkan anda memasukkan elemen sebelum elemen lain. Selalunya digunakan selepas mencipta elemen dengan createElement. Kaedah ini digunakan pada elemen induk bagi elemen yang akan dimasukkan sebelum elemen tersebut.

Sintaks

induk.insertBefore(elemen, sebelum siapa untuk dimasukkan);

Contoh

Mari kita cipta perenggan dan letakkannya sebelum perenggan 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);

Keputusan pelaksanaan kod:

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

Contoh

Mari tambah perenggan pada permulaan elemen #parent. Untuk melakukan ini, kita akan masukkan perenggan kita sebelum anak pertama #parent. Anak pertama ini boleh ditemui 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);

Keputusan pelaksanaan kod:

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

Contoh

Apabila parameter kedua null dihantar, kaedah insertBefore berfungsi seperti appendChild. Pada masa yang sama, jika elemen tidak mempunyai anak elemen, firstElementChild mengembalikan null. Oleh itu, menambah pada permulaan elemen boleh dilakukan walaupun tiada anak elemen di dalamnya:

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

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

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

parent.insertBefore(p, parent.firstChild);

Keputusan pelaksanaan kod:

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

Lihat juga

kaedah prepend,
yang memasukkan elemen pada permulaan
kaedah appendChild,
yang memasukkan elemen pada penghujung induk
kaedah insertAdjacentElement,
yang memasukkan elemen di lokasi yang ditentukan
kaedah insertAdjacentHTML,
yang memasukkan tag di lokasi yang ditentukan