Node: replaceChild() Methode

Syntax

replaceChild(newChild, oldChild)

Parameter

newChild

Der neue Knoten, der oldChild ersetzen soll.

Warnung: Wenn der neue Knoten bereits an einer anderen Stelle im DOM vorhanden ist, wird er zuerst von dieser Position entfernt.

oldChild

Das zu ersetzende Kind.

Rückgabewert

Der ersetzte Node. Dies ist derselbe Knoten wie oldChild.

Ausnahmen

HierarchyRequestError DOMException

Wird ausgelöst, wenn die Beschränkungen des DOM-Baums verletzt werden, das heißt, wenn einer der folgenden Fälle eintritt:

• Wenn das Elternteil von oldChild kein Document, DocumentFragment oder ein Element ist.
• Wenn das Ersetzen von oldChild durch newChild zu einem Zyklus führen würde, das heißt, wenn newChild ein Vorfahre des Knotens ist.
• Wenn newChild kein DocumentFragment, ein DocumentType, ein Element oder ein CharacterData ist.
• Wenn der aktuelle Knoten ein Text ist und sein Elternteil ein Document ist.
• Wenn der aktuelle Knoten ein DocumentType ist und sein Elternteil nicht ein Document ist, da ein doctype immer ein direkter Nachkomme eines document sein sollte.
• Wenn das Elternteil des Knotens ein Document ist und newChild ein DocumentFragment mit mehr als einem Element Kind ist oder ein Text Kind hat.
• Wenn das Ersetzen von oldChild durch newChild zu einem Document mit mehr als einem Element als Kind führen würde.
• Wenn das Ersetzen von oldChild durch newChild dazu führen würde, dass ein Element Knoten vor einem DocumentType Knoten vorhanden ist.

NotFoundError DOMException

Wird ausgelöst, wenn das Elternteil von oldChild nicht der aktuelle Knoten ist.

Beispiel

// Given:
// <div>
//  <span id="childSpan">foo bar</span>
// </div>

// Create an empty element node
// without an ID, any attributes, or any content
const sp1 = document.createElement("span");

// Give it an id attribute called 'newSpan'
sp1.id = "newSpan";

// Create some content for the new element.
const sp1Content = document.createTextNode("new replacement span element.");

// Apply that content to the new element
sp1.appendChild(sp1Content);

// Build a reference to the existing node to be replaced
const sp2 = document.getElementById("childSpan");
const parentDiv = sp2.parentNode;

// Replace existing node sp2 with the new span element sp1
parentDiv.replaceChild(sp1, sp2);

// Result:
// <div>
//   <span id="newSpan">new replacement span element.</span>
// </div>

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Node.removeChild
• Element.replaceWith