createElement metodu

createElement metodu yeni element yaratmağa imkan verir, parametr kimi teq adını ötürerek. Yaradıldıqdan sonra elementlə adi element kimi işləmək olar, həmçinin onu səhifəyə əlavə etmək olar prepend, append, appendChild, insertBefore və ya insertAdjacentElement metodları ilə.

Əgər createElement-in nəticəsini dəyişəndə qeyd etsək, onda bu dəyişəndə elə bir element olacaq ki, sanki onu querySelector və ya getElementById ilə almışıq. Tək fərq - bizim element səhifədə yerləşdirilməyəcək. Amma biz onun innerHTML-ni dəyişə bilərik, atributları, hadisə işləyiciləri əlavə edə bilərik və nəhayət onu səhifədə yerləşdirə bilərik.

Sintaksis

document.createElement('teq adı');

Nümunə

Gəlin abzas yaradaq, ona mətn təyin edək və səhifədə #parent blokunun sonuna yerləşdirək:

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

Kodun icrasının nəticəsi:

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

Nümunə

ul verilib. Gəlin onun içinə 9 ədəd li teqi yerləşdirək, onların mətnini sıra nömrələri edək:

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

Kodun icrasının nəticəsi:

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

Nümunə

Gəlin elementləri daxil edərkən onlara hadisə işləyiciləri bağlayaq:

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

Həmçinin bax

cloneNode metodu,
onun köməyi ilə elementi klonlamaq olar
createTextNode metodu,
onun köməyi ilə yeni mətn qovşağı yaratmaq olar