prepend-metodi

prepend-metodi mahdollistaa elementin lisäämisen toisen elementin alkuun. Metodi ottaa parametrina elementin, yleensä createElement-metodilla luodun, tai merkkijonon. Voit lisätä useita elementtejä tai merkkijonoja kerralla luettelemalla ne pilkulla erotettuna.

Syntaksi

parent.prepend(elementti tai merkkijono);

Esimerkki

Luodaan kappale, asetetaan sille teksti ja sijoitetaan se sivun #parent-lohkon alkuun:

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

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

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

parent.prepend(p);

Koodin suorituksen tulos:

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

Esimerkki

Sijoitetaan useita kappaleita kerralla #parent-lohkon alkuun:

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

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

let p1 = document.createElement('p');
p1.textContent = 'a';

let p2 = document.createElement('p');
p2.textContent = 'b';

parent.prepend(p1, p2);

Koodin suorituksen tulos:

<div id="parent">
	<p>b</p>
	<p>a</p>
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>

Esimerkki

Käytetään metodin parametrina merkkijonoa:

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

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

Koodin suorituksen tulos:

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

Katso myös

metodi append,
joka lisää elementit loppuun
metodi appendChild,
joka lisää elementit loppuun
metodi insertBefore,
joka lisää elementin ennen elementtiä
metodi insertAdjacentElement,
joka lisää elementin määritettyyn paikkaan
metodi insertAdjacentHTML,
joka lisää tagit määritettyyn paikkaan