HTML DOM Element replaceChild() metodu

Tanım ve kullanım

replaceChild() Metod, yeni düğümü alt düğüm ile değiştirir.

Ayrıca bkz:

removeChild() metodu

remove() metodu

appendChild() metodu

insertBefore() metodu

childNodes özelliği

firstChild özelliği

lastChild özelliği

firstElementChild özelliği

lastElementChild özelliği

İlgili belge yöntemleri:

createElement() metodu

createTextNode() metodu

Örnek

örnek 1

Yeni metin düğümünü <li> elementindeki metin düğümü ile değiştir:

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

list.replaceChild(element, list.childNodes[0]);

  • Değiştirilmeden önce:
  • Çay
  • Süt

Değiştirildikten sonra:

  • Su
  • Çay
  • Süt

Kişisel olarak deneyin

örnek 2

<li> elementini yeni <li> elementi ile değiştirin:

// Yeni bir <li> elementi oluşturun:
const element = document.createElement("li");
// Yeni bir metin düğümü oluşturun:
const textNode = document.createTextNode("Su");
// Metin düğümünü <li> elementine ekleyin:
element.appendChild(textNode);
// id="myList" olan <ul> elementini alın:
const list = document.getElementById("myList");
// id="myList" olan <ul> elementini alın:
// Yeni <li> elementi ile ilk alt düğümü değiştirin:

list.replaceChild(element, list.childNodes[0]);

  • Değiştirilmeden önce:
  • Çay
  • Süt

Değiştirildikten sonra:

  • Su
  • Çay
  • Süt

Kişisel olarak deneyin

Sözdizimi

node.replaceChild(newnode, oldnode)

Parametreler

Parametreler Açıklama
newnode Gerekli. Eklenecek düğüm.
oldnode Gerekli. Silinecek düğüm.

Dönüş Değeri

Tür Açıklama
Node Nesnesi Değiştirilen düğüm.

Tarayıcı Desteği

element.replaceChild() DOM Seviye 1 (1998) özelliğidir.

Tüm tarayıcılar tamamen onu destekler:

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