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

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

Shembull

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

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

Rezultati i ekzekutimit të kodit:

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

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

Rezultati i ekzekutimit të kodit:

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

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

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

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

parent.insertBefore(p, parent.firstChild);

Rezultati i ekzekutimit të kodit:

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

Shihni gjithashtu

metoda prepend,
e cila fut elementë në fillim
metoda appendChild,
e cila fut elementë në fund të prindit
metoda insertAdjacentElement,
e cila fut një element në vendin e caktuar
metoda insertAdjacentHTML,
e cila fut etiketa në vendin e caktuar