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 әдісі,
оның көмегімен элементті клондауға болады
createTextNode әдісі,
оның көмегімен жаңа мәтін түйінін құруға болады