createElement metodi

createElement metodi yangi element yaratishga imkon beradi, unga parametr sifatida tegn nomini berib. Yaratilgandan so'ng, element bilan oddiy element kabi ishlash mumkin, shuningdek uni sahifaga prepend, append, appendChild, insertBefore yoki insertAdjacentElement kabi metodlar yordamida qo'shish mumkin.

Agar createElement ning natijasini o'zgaruvchiga yozsak, bu o'zgaruvchida querySelector yoki getElementById orqali olgandek element bo'ladi. Yagona farq - bizning element sahifada joylashmaydi. Lekin biz unga innerHTML ni o'zgartirish, atributlar qo'shish, hodisalar ishlovchilarini bog'lash va nihoyat sahifaga joylashtirishimiz mumkin.

Sintaksis

document.createElement('tegn nomi');

Misol

Keling, abzats yaratamiz, unga matn belgilaymiz va sahifadagi #parent blokining oxiriga joylaymiz:

<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);

Kodni bajarish natijasi:

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

Misol

ul berilgan. Keling, uning ichiga 9 ta li tegnini joylaymiz, ularning matni tartib raqamlari bo'lsin:

<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);
}

Kodni bajarish natijasi:

<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>

Misol

Keling, elementlarni joylashtirishda ularga hodisalar ishlovchilarini bog'laymiz:

<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);
};

Shuningdek qarang

cloneNode metodi,
uning yordamida elementni klonlash mumkin
createTextNode metodi,
uning yordamida yangi matn tugunini yaratish mumkin