Node: replaceChild() Methode
Die replaceChild()
Methode der Node
-Schnittstelle ersetzt ein Kindknoten innerhalb des angegebenen (Eltern-)Knotens.
Syntax
replaceChild(newChild, oldChild)
Parameter
newChild
-
Der neue Knoten, der
oldChild
ersetzen soll.Warnung: Wenn sich der neue Knoten bereits an einer anderen Stelle im DOM befindet, wird er zuerst von dieser Position entfernt.
oldChild
-
Das zu ersetzende Kind.
Hinweis: Die Reihenfolge der Parameter, neu vor alt, ist ungewöhnlich.
Element.replaceWith()
, das nur auf Knoten angewendet wird, die Elemente sind,
könnte leichter zu lesen und zu verwenden sein.
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
nicht einDocument
,DocumentFragment
oder einElement
ist. - Wenn der Austausch von
oldChild
durchnewChild
zu einem Zyklus führen würde, das heißt, wennnewChild
ein Vorfahre des Knotens ist. - Wenn
newChild
keinDocumentFragment
, einDocumentType
, einElement
oder einCharacterData
ist. - Wenn der aktuelle Knoten ein
Text
ist und sein Elternteil einDocument
ist. - Wenn der aktuelle Knoten ein
DocumentType
ist und sein Elternteil nicht einDocument
ist, da ein doctype immer ein direkter Nachfahre eines Dokuments sein sollte. - Wenn das Elternteil des Knotens ein
Document
ist undnewChild
einDocumentFragment
mit mehr als einemElement
-Kind ist, oder das einenText
-Kind hat. - Wenn der Austausch von
oldChild
durchnewChild
zu einemDocument
mit mehr als einemElement
als Kind führen würde. - Wenn der Austausch von
oldChild
durchnewChild
zur Anwesenheit einesElement
-Knotens vor einemDocumentType
-Knoten führen würde.
- Wenn das Elternteil von
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 sp1_content = document.createTextNode("new replacement span element.");
// Apply that content to the new element
sp1.appendChild(sp1_content);
// 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
Specification |
---|
DOM Standard # dom-node-replacechild |
Browser-Kompatibilität
BCD tables only load in the browser