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

javascriptparent.prepend(elementti tai merkkijono);

Esimerkki

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

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

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

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

parent.prepend(p);

Koodin suorituksen tulos:

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

Esimerkki

Sijoitetaan useita kappaleita kerralla #parent-lohkon alkuun:

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

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

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

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

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

Koodin suorituksen tulos:

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

Katso myös