HTML DOM ReplaceChild() Methode
Voorbeeld
Vervang een tekstknooppunt in een <li>-element in een lijst door een nieuw tekstknooppunt:
// 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"
Alvorens te vervangen:
- Coffee
- Tea
- Milk
Na vervanging:
- Water
- Tea
- Milk
Meer "Probeer het zelf" voorbeelden hieronder.
Definitie en gebruik
De methode ReplaceChild() vervangt een onderliggend knooppunt door een nieuw knooppunt.
Het nieuwe knooppunt kan een bestaand knooppunt in het document zijn, of u kunt een nieuw knooppunt maken.
Tip: Gebruik de methode removeChild() om een onderliggende node van een element te verwijderen.
Browserondersteuning
| Method | |||||
|---|---|---|---|---|---|
| replaceChild() | Yes | Yes | Yes | Yes | Yes |
Syntaxis
node.replaceChild(newnode, oldnode)
Parameterwaarden
| 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
| Winstwaarde: | Een knooppuntobject, dat het vervangen knooppunt vertegenwoordigt |
|---|---|
| DOM-versie | Kernniveau 1 knooppuntobject |
Meer voorbeelden
Voorbeeld
Vervang een <li>-element in een lijst door een nieuw <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
Voor het verwijderen:
- Coffee
- Tea
- Milk
Na het verwijderen:
- Water
- Tea
- Milk