Meetod insertBefore

Meetod insertBefore võimaldab lisada elemendi enne teist elementi. Kõige sagedamini kasutatakse seda peale elemendi loomist meetodiga createElement. Meetodit rakendatakse selle elemendi vanemale, enne mida lisamine toimub.

Süntaks

vanem.insertBefore(element, enne keda lisada);

Näide

Loome lõigu ja asetame selle teise lõigu ette:

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

Koodi täitmise tulemus:

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

Näide

Lisame lõigu elemendi #parent algusesse. Selleks lisame oma lõigu enne #parent esimest last. Selle lapse leiab abiga 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);

Koodi täitmise tulemus:

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

Näide

Kui teiseks parameetriks edastada null, siis meetod insertBefore toimib nagu appendChild. Samal ajal, kui elemendil pole lapsi, tagastab firstElementChild null. Seega on elemendi algusesse lisamine võimalik isegi siis, kui sellel pole lapsi:

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

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

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

parent.insertBefore(p, parent.firstChild);

Koodi täitmise tulemus:

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

Vaata ka

meetod prepend,
mis lisab elemendid algusesse
meetod appendChild,
mis lisab elemendid vanema lõppu
meetod insertAdjacentElement,
mis lisab elemendi määratud kohta
meetod insertAdjacentHTML,
mis lisab siltide määratud kohta