Metode createElement

Metode createElement memungkinkan untuk membuat elemen baru dengan meneruskan nama tag sebagai parameter. Setelah dibuat, Anda dapat bekerja dengan elemen tersebut seperti elemen biasa, dan juga dapat menambahkannya ke halaman dengan metode prepend, append, appendChild, insertBefore atau insertAdjacentElement.

Jika hasil kerja createElement ditulis ke dalam variabel, maka variabel tersebut akan berisi elemen, seolah-olah kita mendapatkannya melalui querySelector atau getElementById. Satu-satunya perbedaan - elemen kita tidak akan ditempatkan di halaman. Selain itu, kita dapat mengubah innerHTML-nya, atributnya, menambahkan penangan event dan pada akhirnya menempatkannya di halaman.

Sintaks

document.createElement('nama tag');

Contoh

Mari buat paragraf, atur teksnya dan tempatkan 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);

Hasil eksekusi kode:

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

Contoh

Diberikan ul. Mari tempatkan di dalamnya 9 tag li, dengan menjadikan nomor urut sebagai teksnya:

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

Hasil eksekusi kode:

<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 saat menyisipkan elemen, kita tambahkan penangan event 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

metode cloneNode,
yang dapat digunakan untuk mengkloning elemen
metode createTextNode,
yang dapat digunakan untuk membuat simpul teks baru