JavaScriptда элементлар яратиш ва қўшиш

Ҳозир биз JavaScript орқали янги DOM элементларини қандай яратишни ва уларни саҳифага қўшишни ўрганамиз. Бунинг учун createElement усули мўлжалланган. Ушбу усулга параметр сифатида яратилиши керак бўлган тег номи ўтказилади.

Агар createElement ишининг натижасини ўзгарувчига ёзсак, у ҳолда ушбу ўзгарувчида биз уни querySelector орқали олгандек элемент бўлади.

Ягона фарк - бизнинг элементимиз саҳифада жойлашмайди. Аммо биз унга матнни, атрибутларни ўзгартиришимиз, ишларга ишловчиларни бириктиришимиз ва oxir-oqibat саҳифага жойлаштиришимиз мумкин.

Саҳифага янги элементни жойлаштириш учун appendChild усули қўлланилади. Ушбу усул биз элементни *қайерга* жойлаштирмоқчи бўлсак, ўша элементга нисбатан қўлланилади. Усулга параметр сифатида илгари createElement орқали яратилган бизнинг янги элементимиз ўтказилади.

Амалий мисолда кўрамиз. Фароз қилайлик, бизда див бор, уннинг ичида бир неча абзац бор:

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

Келинг, абзац яратайлик, унга матн белгилайлик ва саҳифага блокнинг oxирига #parent жойлаштирайлик:

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

let p = document.createElement('p');
p.textContent = '!';

parent.appendChild(p);

Кодни ишга тушириш натижаси:

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

ol берилган:

<ol id="elem"></ol>

Унга oxирига li матн билан 'item' қўшинг.

ol ва тугма берилган:

<ol id="elem"></ol>
<button id="button">click me</button>

Тугма босилганда, рўйхатнинг oxирига li матн билан 'item' қўшиладиган қилинг.