Метод createElement

Метод createElement параметрда тег номини бериш орқали янги элемент яратиш имконини беради. Яратилгандан сўнг элемент билан оддий элемент каби ишлаш мумкин, шунгақ қўра уни саҳифага prepend, append, appendChild, insertBefore ёки insertAdjacentElement усуллари орқали қўшиш мумкин.

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

Синтаксис

document.createElement('тег номи');

Мисол

Келтирилган яратиб кўрамиз, унга матн ўрнатамиз ва саҳифага #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.appendChild(p);

Код ишлаш натижаси:

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

Мисол

ul берилган. Келтирилган унинг ичига 9 та li тегни жойлаштирамиз, уларнинг матнини тартиб рақамлари қиламиз:

<ul id="parent"></ul>

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

for (let i = 1; i <= 9; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	parent.appendChild(li);
}

Код ишлаш натижаси:

<ul id="parent">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
</ul>

Мисол

Келтирилган элементларни жойлаштиришда уларга воқеа ишловчиларини боглаймиз:

<ul id="parent"></ul>

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

for (let i = 1; i <= 9; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	
	li.addEventListener('click', function() {
		alert(this.textContent);
	});
	
	parent.appendChild(li);
};

Қараш

cloneNode усули,
унing ёрдамида элементни клонлаш мумкин
createTextNode усули,
унing ёрдамида янги матн тугунчиси яратиш мумкин