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

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

Contoh

Mari kita cipta perenggan dan letakkannya sebelum perenggan kedua:

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

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

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

parent.insertBefore(p, before);

Keputusan pelaksanaan kod:

html<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:

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

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

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

parent.insertBefore(p, parent.firstElementChild);

Keputusan pelaksanaan kod:

html<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:

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

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

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

parent.insertBefore(p, parent.firstChild);

Keputusan pelaksanaan kod:

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

Lihat juga