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

rodzic.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:

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

Wynik wykonania kodu:

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

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

Wynik wykonania kodu:

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

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

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

Wynik wykonania kodu:

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

Zobacz też

metoda append,
który wstawia elementy na koniec
metoda appendChild,
który wstawia elementy na koniec
metoda insertBefore,
który wstawia element przed elementem
metoda insertAdjacentElement,
który wstawia element w określone miejsce
metoda insertAdjacentHTML,
który wstawia znaczniki w określone miejsce