Metode HTML DOM Element appendChild()

Definisi dan penggunaan

appendChild() Metode menambahkan node (elemen) sebagai anak terakhir elemen.

Lihat pula:

Metode insertBefore()

Metode replaceChild()

Metode removeChild()

Metode remove()

Properti childNodes

Properti firstChild

Properti lastChild

Properti firstElementChild

Properti lastElementChild

Metode dokumen yang relevan:

Metode createElement()

Metode createTextNode()

Contoh

Contoh 1

Menambahkan item ke dalam daftar:

const node = document.createElement("li");
const textnode = document.createTextNode("Air");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);

Sebelum ditambahkan:

  • Kopi
  • Teh

Setelah ditambahkan:

  • Kopi
  • Teh
  • Air

Coba sendiri

Contoh 2

Memindahkan item daftar dari daftar ke daftar lain:

const node = document.getElementById("myList2").lastElementChild;
document.getElementById("myList1").appendChild(node);

Sebelum pindah:

  • Kopi
  • Teh

  • Air
  • Susu

Setelah pindah:

  • Kopi
  • Teh
  • Susu

  • Air

Coba sendiri

Contoh 3

Buat paragraf dengan teks:

  • Buat elemen paragraf
  • Buat node teks
  • Tambahkan node teks ke paragraf
  • Tambahkan paragraf ke dokumen

Buat elemen <p> dan tambahkan ke elemen <div>:

const para = document.createElement("p");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.getElementById("myDIV").appendChild(para);

Coba sendiri

Contoh 4

Buat elemen <p> dan tambahkan ke konten dokumen:

const para = document.createElement("P");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.body.appendChild(para);

Coba sendiri

Sintaks

element.appendChild(node)

atau

node.appendChild(node)

Parameter

Parameter Deskripsi
node Diperlukan. Node yang akan ditambahkan.

Nilai kembalian

Tipe Deskripsi
Node Node yang ditambahkan.

Dukungan peramban

element.appendChild() Adalah fitur DOM Level 1 (1998).

Semua peramban mendukungnya sepenuhnya:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Dukungan 9-11 Dukungan Dukungan Dukungan Dukungan