Penciptaan dan Penyisipan Elemen dalam JavaScript

Sekarang kita akan belajar mencipta elemen DOM baharu melalui JavaScript, dan kemudian menambahkannya ke halaman. Untuk tujuan ini, kaedah createElement digunakan. Parameter bagi kaedah ini hendaklah nama tag yang ingin dicipta.

Jika hasil kerja createElement disimpan ke dalam pembolehubah, maka pembolehubah tersebut akan mengandungi elemen tersebut, seolah-olah kita mendapatkannya melalui querySelector.

Satu-satunya perbezaan - elemen kita tidak akan ditempatkan pada halaman. Selain itu, kita boleh menukar teksnya, atribut, meletakkan pengendali (handler) peristiwa dan akhirnya meletakkannya pada halaman.

Untuk meletakkan elemen baharu pada halaman, kaedah appendChild digunakan. Kaedah ini hendaklah digunakan pada elemen yang *ke dalamnya* kita mahu meletakkan elemen kita. Dan parameter kaedah hendaklah elemen baharu kita, yang dicipta sebelum ini melalui createElement.

Mari kita lihat contoh praktikal. Katakan kita mempunyai satu div, dan di dalamnya - beberapa perenggan:

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

Mari kita cipta satu perenggan, tetapkan teksnya dan letakkan pada halaman di hujung blok #parent:

let parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.appendChild(p);

Hasil pelaksanaan kod:

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

Diberi ol:

<ol id="elem"></ol>

Masukkan untuknya di hujung li dengan teks 'item'.

Diberi ol dan butang:

<ol id="elem"></ol>
<button id="button">click me</button>

Jadikan supaya apabila mengklik butang di hujung senarai ditambah li dengan teks 'item'.