Метод 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,
тегларни белгиланган жойга қўйадган