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 методу,
анын жардамы менен жаңы текст түйүнүн түзүүгө болот