Методи 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,
ки бо ёрии он метавон гиреҳи матнии нав эҷод кард