Методот 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,
кој вметнува тагови на зададено место