Metoda prepend

Metoda prepend umożliwia wstawienie na początek danego elementu innego elementu. Jako parametr metoda przyjmuje element, zazwyczaj utworzony za pomocą createElement, lub ciąg znaków. Można dodać od razu kilka elementów lub ciągów znaków, wymieniając je przez przecinek.

Składnia

javascriptrodzic.prepend(element lub ciąg znaków);

Przykład

Stwórzmy akapit, ustawmy mu tekst i umieśćmy na stronie na początku 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);

Wynik wykonania kodu:

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

Przykład

Umieśćmy od razu kilka akapitów na początku 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);

Wynik wykonania kodu:

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

Przykład

Użyjmy jako parametru metody ciągu znaków:

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

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

Wynik wykonania kodu:

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

Zobacz też