Kaedah createElement

Kaedah createElement membolehkan anda mencipta elemen baharu dengan menyampaikan nama tag dalam parameter. Selepas penciptaan, elemen boleh diuruskan seperti elemen biasa, dan ia juga boleh ditambahkan ke halaman menggunakan kaedah prepend, append, appendChild, insertBefore atau insertAdjacentElement.

Jika hasil kerja createElement disimpan ke dalam pembolehubah, maka pembolehubah tersebut akan mengandungi elemen yang sama seolah-olah kita mendapatkannya melalui querySelector atau getElementById. Satu-satunya perbezaan - elemen kita tidak akan ditempatkan di halaman. Selain itu, kita boleh menukar innerHTMLnya, atribut, menambahkan pengendali acara dan akhirnya menempatkannya di halaman.

Sintaks

document.createElement('nama tag');

Contoh

Mari kita cipta perenggan, tetapkan teks untuknya dan letakkan di halaman di akhir blok #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);

Keputusan pelaksanaan kod:

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

Contoh

Diberi ul. Mari letakkan 9 tag li di dalamnya, sambil menjadikan nombor urutan sebagai teks mereka:

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

Keputusan pelaksanaan kod:

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

Contoh

Mari semasa memasukkan elemen, kita akan mengaitkan pengendali acara kepada mereka:

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

Lihat juga

kaedah cloneNode,
yang boleh digunakan untuk mengklon elemen
kaedah createTextNode,
yang boleh digunakan untuk mencipta nod teks baharu