insertBefore metodas

insertBefore metodas leidžia įterpti elementą prieš kitą elementą. Dažniausiai naudojamas sukūrus elementą su createElement pagalba. Metodas taikomas to elemento tėvui, prieš kurį įvyks įterpimas.

Sintaksė

javascripttėvas.insertBefore(elementas, prieš ką įterpti);

Pavyzdys

Sukurkime pastraipą ir patalpinkime ją prieš antrą pastraipą:

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);

Kodo vykdymo rezultatas:

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

Pavyzdys

Pridėkime pastraipą į #parent elemento pradžią. Tam įtersime savo pastraipą prieš pirmąjį #parent palikuonį. Šį palikuonį galima rasti naudojant 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);

Kodo vykdymo rezultatas:

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

Pavyzdys

Perduodant antruoju parametru null metodas insertBefore veikia kaip appendChild. Tuo pačiu metu, jei elemente nėra antrinių elementų, firstElementChild grąžina null. Vadinasi, pridėti į elemento pradžią galima net tada, kai jame nėra antrinių elementų:

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

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

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

parent.insertBefore(p, parent.firstChild);

Kodo vykdymo rezultatas:

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

Taip pat žiūrėkite