Metode replaceChild() DOM HTML Element HTML

Definisi dan penggunaan

replaceChild() Metode mengganti node anak dengan node baru.

Lihat juga:

Metode removeChild()

Metode remove()

Metode appendChild()

Metode insertBefore()

Atribut childNodes

Atribut firstChild

Atribut lastChild

Atribut firstElementChild

Atribut lastElementChild

Metode dokumen yang berhubungan:

Metode createElement()

Metode createTextNode()

Contoh

Contoh 1

Ganti node teks baru untuk node teks dalam elemen <li>:

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

Cuba sendiri

Contoh 2

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

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

Sebelum digantikan:

  • Kopi
  • Tea
  • Milk

Setelah digantikan:

  • Air
  • Tea
  • Milk

Cuba sendiri

Sintaks

node.replaceChild(newnode, oldnode)

Parameter

Parameter Penerangan
newnode Diperlukan. Noda yang akan disisipkan.
oldnode Diperlukan. Noda yang akan dipadamkan.

Hasil balik

Jenis Penerangan
Objek Node Noda yang digantikan.

Dukungan pelayar

element.replaceChild() Adalah ciri DOM Level 1 (1998).

Semua pelayar mendukung sepenuhnya:

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