Metoda prepend

Metoda prepend umožňuje vložit na začátek nějakého elementu jiný element. Jako parametr přijímá element, obvykle vytvořený pomocí createElement, nebo řetězec. Je možné přidat několik elementů nebo řetězců najednou, stačí je vyjmenovat čárkou.

Syntaxe

javascriptrodič.prepend(prvek nebo řetězec);

Příklad

Vytvořme odstavec, nastavme mu text a umístěme jej na stránku na začátek bloku #parent:

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

Výsledek provedení kódu:

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

Příklad

Umístěme několik odstavců najednou na začátek bloku #parent:

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

Výsledek provedení kódu:

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

Příklad

Použijme jako parametr metody řetězec:

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

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

Výsledek provedení kódu:

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

Viz také