Pembuatan dan Penyisipan Elemen pada JavaScript

Sekarang kita akan belajar membuat elemen DOM baru melalui JavaScript, lalu menambahkannya ke halaman. Untuk ini, metode yang digunakan adalah createElement. Parameter dari metode ini harus berupa nama tag yang akan dibuat.

Jika hasil kerja createElement ditulis ke dalam variabel, maka variabel tersebut akan berisi elemen tersebut, seolah-olah kita mendapatkannya melalui querySelector.

Satu-satunya perbedaan - elemen kita tidak akan ditempatkan di halaman. Selain itu, kita dapat mengubah teksnya, atributnya, menambahkan penangan peristiwa dan pada akhirnya menempatkannya di halaman.

Untuk menempatkan elemen baru di halaman, digunakan metode appendChild. Metode ini harus diterapkan pada elemen, ke dalam mana kita ingin meletakkan elemen kita. Dan parameternya harus berupa elemen baru kita, yang dibuat sebelumnya melalui createElement.

Mari kita lihat contoh praktis. Misalkan kita memiliki sebuah div, dan di dalamnya - beberapa paragraf:

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

Mari kita buat sebuah paragraf, atur teksnya dan tempatkan di halaman di akhir blok #parent:

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

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

parent.appendChild(p);

Hasil eksekusi kode:

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

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

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