insertBefore-metodi

insertBefore-metodi mahdollistaa elementin lisäämisen toisen elementin eteen. Sitä käytetään useimmiten elementin luomisen jälkeen createElement-metodilla. Metodia sovelletaan sen elementin vanhempaan, ennen joka lisäys tapahtuu.

Syntaksi

vanhempi.insertBefore(elementti, ennen kenntä lisätä);

Esimerkki

Luodaan kappale ja sijoitetaan se toisen kappaleen eteen:

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

Koodin suorituksen tulos:

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

Esimerkki

Lisätään kappale elementin #parent alkuun. Tätä varten lisätään kappaleemme ennen #parent-elementin ensimmäistä lapsielementtiä. Tämä lapsielementti voidaan löytää käyttämällä firstElementChild-metodia:

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

Koodin suorituksen tulos:

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

Esimerkki

Kun toisena parametrina välitetään null, metodi insertBefore toimii kuten appendChild-metodi. Samalla, jos elementissä ei ole lapsi- elementtejä, firstElementChild palauttaa null. Näin ollen alkukohtaan lisääminen onnistuu myös silloin, kun siinä ei ole lapsi- elementtejä:

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

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

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

parent.insertBefore(p, parent.firstChild);

Koodin suorituksen tulos:

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

Katso myös

metodi prepend,
joka lisää elementit alkuun
metodi appendChild,
joka lisää elementit vanhemman loppuun
metodi insertAdjacentElement,
joka lisää elementin määritettyyn paikkaan
metodi insertAdjacentHTML,
joka lisää tagit määritettyyn paikkaan