Усули 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,
ки тегҳоро дар ҷои муайянкардашуда ворид мекунад