HTML DOM replaceChild() Methode
Beispiel
Ersetzen Sie einen Textknoten in einem <li>-Element in einer Liste durch einen neuen Textknoten:
// Create a new text node called "Water"
var textnode = document.createTextNode("Water");
// Get the first child node of an <ul> element
var item = document.getElementById("myList").childNodes[0];
// Replace the first child node of <ul> with the newly created text node
item.replaceChild(textnode, item.childNodes[0]);
// Note: This example replaces only the Text node "Coffee" with a Text node "Water"
Vor dem Austausch:
- Coffee
- Tea
- Milk
Nach dem Austausch:
- Water
- Tea
- Milk
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die Methode replaceChild() ersetzt einen untergeordneten Knoten durch einen neuen Knoten.
Der neue Knoten kann ein vorhandener Knoten im Dokument sein oder Sie können einen neuen Knoten erstellen.
Tipp: Verwenden Sie die Methode removeChild() , um einen untergeordneten Knoten aus einem Element zu entfernen.
Browser-Unterstützung
Method | |||||
---|---|---|---|---|---|
replaceChild() | Yes | Yes | Yes | Yes | Yes |
Syntax
node.replaceChild(newnode, oldnode)
Parameterwerte
Parameter | Type | Description |
---|---|---|
newnode | Node object | Required. The node object you want to insert |
oldnode | Node object | Required. The node object you want to remove |
Technische Details
Rückgabewert: | Ein Node-Objekt, das den ersetzten Knoten darstellt |
---|---|
DOM-Version | Knotenobjekt der Kernebene 1 |
Mehr Beispiele
Beispiel
Ersetzen Sie ein <li>-Element in einer Liste durch ein neues <li>-Element:
// Create a new <li> element
var elmnt = document.createElement("li");
// Create a new text node called "Water"
var textnode = document.createTextNode("Water");
// Append the text node to <li>
elmnt.appendChild(textnode);
// Get the <ul> element with id="myList"
var item = document.getElementById("myList");
// Replace the first child node (<li> with index 0) in <ul> with the newly created <li> element
item.replaceChild(elmnt, item.childNodes[0]);
// Note: This example replaces the entire <li> element
Vor dem Entfernen:
- Coffee
- Tea
- Milk
Nach dem Entfernen:
- Water
- Tea
- Milk