Az insertBefore metódus

Az insertBefore metódus lehetővé teszi egy elem beszúrását egy másik elem elé. Leggyakrabban az createElement segítségével létrehozott elemek után használják. A metódust annak a szülőnek kell meghívni, amelyik eleme elé beszúrás történik.

Szintaxis

szülő.insertBefore(elem, elé kell szúrni);

Példa

Hozzunk létre egy bekezdést és helyezzük a második bekezdés elé:

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

A kód végrehajtásának eredménye:

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

Példa

Adjunk hozzá egy bekezdést a #parent elem elejéhez. Ehhez a bekezdést a #parent első gyermeke elé szúrjuk be. Ezt a gyermeket a firstElementChild segítségével találhatjuk meg:

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

A kód végrehajtásának eredménye:

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

Példa

Ha a második paraméterként null-t adunk át, a insertBefore metódus úgy viselkedik, mint az appendChild. Ugyanakkor, ha egy elemnek nincsenek gyermek elemei, a firstElementChild null-t ad vissza. Következésképpen, az elem elejéhez adhatunk hozzá még akkor is, ha nincsenek gyermek elemei:

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

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

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

parent.insertBefore(p, parent.firstChild);

A kód végrehajtásának eredménye:

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

Lásd még

a prepend metódus,
amely elemeket szúr be az elejére
a appendChild metódus,
amely elemeket szúr be a szülő végére
a insertAdjacentElement metódus,
amely egy elemet szúr be egy megadott helyre
a insertAdjacentHTML metódus,
amely HTML-t szúr be egy megadott helyre