Metoda insertBefore

Metoda insertBefore lejon futjen e një elementi përpara një elementi tjetër. Më së shpeshti përdoret pas krijimit të një elementi me ndihmën e createElement. Metoda aplikohet te prindëri i atij elementi, përpara të cilit do të bëhet futja.

Sintaksa

javascriptprindëri.insertBefore(elementi, përpara kujt të futet);

Shembull

Le të krijojmë një paragraf dhe ta vendosim atë përpara paragrafit të dytë:

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

Rezultati i ekzekutimit të kodit:

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

Shembull

Le të shtojmë një paragraf në fillim të elementit #parent. Për këtë, do të fusim paragrafin tonë përpara pasardhësit të parë të #parent. Ky pasardhës mund të gjendet me ndihmën e 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);

Rezultati i ekzekutimit të kodit:

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

Shembull

Gjatë dërgimit të parametrit të dytë null metoda insertBefore vepron si appendChild. Në të njëjtën kohë, nëse në element nuk ka elementë pasardhës, firstElementChild kthen null. Rrjedhimisht, shtimi në fillim të elementit është i mundur edhe kur nuk ka elementë pasardhës në të:

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

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

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

parent.insertBefore(p, parent.firstChild);

Rezultati i ekzekutimit të kodit:

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

Shihni gjithashtu