Mbinu ya createElement

Mbinu createElement inakuwezesha kuunda kipengele kipya, kwa kupitisha jina la kitambulizo kwenye kigezo. Baada ya kuunda, unaweza kufanya kazi na kipengele hicho kama kipengele cha kawaida, na pia unaweza kuongeza kwenye ukurasa kwa kutumia mbinu prepend, append, appendChild, insertBefore au insertAdjacentElement.

Ikiwa utaandika matokeo ya kazi ya createElement kwenye kutofautisha, basi kwenye kutofautisha hiyo kutakuwa na kipengele kama hicho, kana kwamba tumepata hicho kipengele kupitia querySelector au getElementById. Tofauti pekee - kipengele chetu hakitakuwa kimewekwa kwenye ukurasa. Lakini tunaweza kubadilisha innerHTML yake, sifa, kuweka wakaguzi wa matukio na mwishowe kukiweka kwenye ukurasa.

Kisarufu

document.createElement('jina la kitambulizo');

Mfano

Wacha tuunde aya, tuiweke maandishi na tuiweke kwenye ukurasa mwisho mwa kipande #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);

Matokeo ya utekelezaji wa kificho:

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

Mfano

Amepewa ul. Wacha tuweke ndani yake 9 vitambulizo li, huku maandishi yao yakawa namba za mpangilio:

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

Matokeo ya utekelezaji wa kificho:

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

Mfano

Wacha tunapoweka vipelelezi tutaambatisha wakaguzi wa matukio kwao:

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

Angalia pia

mbinu cloneNode,
ambayo kwa kutumia hiyo unaweza kuiga kipengele
mbinu createTextNode,
ambayo kwa kutumia hiyo unaweza kuunda nodi maandishi mpya