Метод prepend

Метод prepend омогућава да се у почетак неког елемента убаци други елемент. Параметром метод прихвата елемент, обично креиран преко createElement, или стринг. Може се додати одједном неколико елемената или стрингова, набројаних преко зареза.

Синтакса

родитељ.prepend(елемент или стринг);

Пример

Хајде да креирамо параграф, поставимо му текст и сместимо на страницу на почетак блока #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);

Резултат извршавања кода:

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

Пример

Сместимо одједном неколико параграфа на почетак блока #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);

Резултат извршавања кода:

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

Пример

Хајде као параметар метода употребимо стринг:

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

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

Резултат извршавања кода:

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

Погледајте такође

метод append,
који убацује елементе на крај
метод appendChild,
који убацује елементе на крај
метод insertBefore,
који убацује елемент пре елемента
метод insertAdjacentElement,
који убацује елемент на задано место
метод insertAdjacentHTML,
који убацује тагове на задано место