Metode replaceChild() DOM Element HTML

Definisi dan penggunaan

replaceChild() Metode mengganti node anak dengan node baru.

Lihat pula:

Metode removeChild()

Metode remove()

Metode appendChild()

Metode insertBefore()

Atribut childNodes

Atribut firstChild

Atribut lastChild

Atribut firstElementChild

Atribut lastElementChild

Metode referensi yang relevan:

Metode createElement()

Metode createTextNode()

Contoh

Contoh 1

Ganti node teks baru ke dalam elemen <li> yang ada di dalam node teks:

const newNode = document.createTextNode("Air");
const element = document.getElementById("myList").children[0];
element.replaceChild(newNode, element.childNodes[0]);

Sebelum digantikan:

  • Kopi
  • Tea
  • Milk

Setelah digantikan:

  • Air
  • Tea
  • Milk

Coba Sendiri

Contoh 2

Ganti elemen <li> dengan elemen <li> baru:

// Buat elemen <li> baru:
const element = document.createElement("li");
// Buat node teks baru:
const textNode = document.createTextNode("Air");
// Sisipkan node teks ke elemen <li>:
element.appendChild(textNode);
// Dapatkan elemen <ul> dengan id="myList":
const list = document.getElementById("myList");
// Ganti pertama anak node dengan elemen <li> baru:
list.replaceChild(element, list.childNodes[0]);

Sebelum digantikan:

  • Kopi
  • Tea
  • Milk

Setelah digantikan:

  • Air
  • Tea
  • Milk

Coba Sendiri

Sintaks

node.replaceChild(newnode, oldnode)

Parameter

Parameter Deskripsi
newnode Diperlukan. Node yang akan disisipkan.
oldnode Diperlukan. Node yang akan dihapus.

Nilai yang kembali

Tipe Deskripsi
Objek Node Node yang digantikan.

Dukungan Peramban

element.replaceChild() 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