HTML DOM Element replaceChild() Methode

Definition und Verwendung

replaceChild() Mit dem neuen Knoten den Kindknoten ersetzen.

Siehe auch:

removeChild() Methode

remove() Methode

appendChild() Methode

insertBefore() Methode

childNodes Eigenschaft

firstChild Eigenschaft

lastChild Eigenschaft

firstElementChild Eigenschaft

lastElementChild Eigenschaft

Verwandte Dokumentmethoden:

createElement() Methode

createTextNode() Methode

Beispiel

Beispiel 1

Ersetzen Sie den Textknoten des <li>-Elements durch einen neuen Textknoten:

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

Ersetzen vor:

  • Coffee
  • Tea
  • Milk

Ersetzen nach:

  • Water
  • Tea
  • Milk

Probieren Sie es selbst aus

Beispiel 2

Ersetzen Sie das <li> Element durch ein neues <li> Element:

// Erstellen Sie ein neues <li> Element:
const element = document.createElement("li");
// Erstellen Sie einen neuen Textknoten:
const textNode = document.createTextNode("Water");
// Fügen Sie den Textknoten dem <li> Element hinzu:
element.appendChild(textNode);
// Erhalten Sie das <ul> Element mit id="myList":
const list = document.getElementById("myList");
// Ersetzen Sie den ersten Kindknoten durch einen neuen <li> Element:
list.replaceChild(element, list.childNodes[0]);

Ersetzen vor:

  • Coffee
  • Tea
  • Milk

Ersetzen nach:

  • Water
  • Tea
  • Milk

Probieren Sie es selbst aus

Syntax

node.replaceChild(newnode, oldnode)

Parameter

Parameter Beschreibung
newnode Erforderlich. Der einzufügende Knoten.
oldnode Erforderlich. Der zu löschende Knoten.

Rückgabewert

Typ Beschreibung
Node-Objekt Der ersetzte Knoten.

Browserkompatibilität

element.replaceChild() Es ist eine Eigenschaft von DOM Level 1 (1998).

Alle Browser unterstützen es vollständig:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Unterstützung 9-11 Unterstützung Unterstützung Unterstützung Unterstützung