Метод 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,
който вмъква тагове на зададено място