Metoda replaceChild() obiektu HTML DOM Element

Definicja i użycie

replaceChild() Metoda używa nowego węzła do zastąpienia węzła potomka.

Zobacz również:

Metoda removeChild()

Metoda remove()

Metoda appendChild()

Metoda insertBefore()

Atrybut childNodes

Atrybut firstChild

Atrybut lastChild

Atrybut firstElementChild

Atrybut lastElementChild

Związane metody dokumentu:

Metoda createElement()

Metoda createTextNode()

Przykład

Przykład 1

Zastąp nowym węzłem tekstowym węzeł tekstowy elementu <li>:

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

Przed zastąpieniem:

  • Kawa
  • Herbata
  • Mleko

Po zastąpieniu:

  • Woda
  • Herbata
  • Mleko

Spróbuj sam

Przykład 2

Zastąp element <li> nowym elementem <li>:

// Utwórz nowy element <li>:
const element = document.createElement("li");
// Utwórz nowy węzeł tekstowy:
const textNode = document.createTextNode("Woda");
// Dodaj węzeł tekstowy do elementu <li>:
element.appendChild(textNode);
// Uzyskaj element <ul> o id="myList":
const list = document.getElementById("myList");
// Zastąp pierwszy element potomka nowym elementem <li>:
list.replaceChild(element, list.childNodes[0]);

Przed zastąpieniem:

  • Kawa
  • Herbata
  • Mleko

Po zastąpieniu:

  • Woda
  • Herbata
  • Mleko

Spróbuj sam

Gramatyka

node.replaceChild(newnode, oldnode)

Parametry

Parametry Opis
newnode Wymagane. Węzeł do wstawienia.
oldnode Wymagane. Węzeł do usunięcia.

Zwracana wartość

Typ Opis
Obiekt Node Węzeł zastąpiony.

Wspierane przeglądarki

element.replaceChild() To jest cecha DOM Level 1 (1998).

Wszystkie przeglądarki wspierają to w pełni:

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