createElement metodi

createElement metodi, tag adyny parametr hökmünde geçirip täze element döretmäge mümkinçilik berýär. Döredilenden soň element bilen adaty element ýaly işlemek mümkin, şeýle hem ony sahypa üstüne prepend, append, appendChild, insertBefore ýa-da insertAdjacentElement metodlary bilen goşup bolýar.

Eger createElement metodynyň netijesini üýtgeýjide ýazsak, onda şol üýtgeýjide element bolup, goý biz ony querySelector ýa-da getElementById arkaýyly alypdyk. Diňe bir tapawut - biziň elementimiz sahypa üstünde ýerleşdirilen bolmaz. Emma biz onuň innerHTML-ini üýtgedip, atributlaryny düzedip, wakalar üçin işleýjileri bellep, ahyrynda ony sahypa üstünde ýerleşdirip bileris.

Sintaksis

document.createElement('tag ady');

Mysal

Geliň, abzas döredeliň, oňa tekst belleliň we sahypa üstünde #parent blogunyň ahyryna ýerleşdireliň:

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

Kody ýerine ýetirmegiň netijesi:

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

Mysal

ul berlipdir. Geliň, onuň içine 9 sany li tagyny ýerleşdireliň, olaryň tekstini bolsa tertip belgileri edeliň:

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

Kody ýerine ýetirmegiň netijesi:

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

Mysal

Geliň, elementleri goşýan wagtymyzda olara waka işleýjilerini birikdireliň:

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

Şeýle-de görüň

cloneNode metodi,
onyň kömegi bilen elementleri klonlap bolýar
createTextNode metodi,
onyň kömegi bilen täze tekst gurupsy döredip bolýar