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

javascriptdocument.createElement('nama tag');

Contoh

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

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

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>

Contoh

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

html<ul id="parent"></ul>

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

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

html<ul id="parent"></ul>

javascriptlet 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