| [ Web Proxy ] |
| Viewing: https://developer.mozilla.org/de/docs/Web/API/Node/insertBefore | [Back] [Original] |
Get to know MDN better
Dieser Inhalt wurde automatisch aus dem Englischen bersetzt, und kann Fehler enthalten. Erfahre mehr ber dieses Experiment.
Diese Funktion ist gut etabliert und funktioniert auf vielen Gerten und in vielen Browserversionen. Sie ist seit Juli 2015 browserbergreifend verfgbar.
Die insertBefore()-Methode der Node-Schnittstelle
fgt einen Knoten vor einem Referenzknoten als Kind eines angegebenen Elternknotens ein.
Wenn der angegebene Knoten bereits im Dokument existiert, versetzt insertBefore() ihn von seiner aktuellen Position zur neuen Position. (Das bedeutet, er wird automatisch von seinem bestehenden Elternteil entfernt, bevor er dem angegebenen neuen Elternteil hinzugefgt wird.)
Das bedeutet, dass ein Knoten nicht gleichzeitig an zwei Positionen im Dokument sein kann.
Hinweis:
Die Methode Node.cloneNode() kann benutzt werden, um eine Kopie des Knotens zu erstellen, bevor er unter dem neuen Elternteil angehngt wird. Beachten Sie, dass die mit cloneNode() erstellten Kopien nicht automatisch synchron gehalten werden.
Wenn das angegebene Kind ein DocumentFragment ist, wird der gesamte Inhalt des DocumentFragment in die Kinderliste des angegebenen Elternknotens verschoben.
insertBefore(newNode, referenceNode)
newNodeDer einzufgende Knoten.
referenceNodeDer Knoten, vor dem newNode eingefgt wird. Ist dies null, wird newNode am Ende der Kindknoten des Knotens eingefgt.
Hinweis:>referenceNode ist kein optionaler Parameter. Sie mssen explizit einen Node oder null bergeben. Das Nichterfllen dieser Anforderung oder das bergeben ungltiger Werte kann in verschiedenen Browserversionen unterschiedliches Verhalten auslsen.
Gibt das hinzugefgte Kind zurck (es sei denn, newNode ist ein DocumentFragment, in diesem Fall wird das leere DocumentFragment zurckgegeben).
Vor-Einfgungs-Gltigkeit
<div id="parentElement">
<span id="childElement">foo bar</span>
</div>
// Create the new node to insert
const newNode = document.createElement("span");
// Get a reference to the parent node
const parentDiv = document.getElementById("childElement").parentNode;
// Begin test case [ 1 ] : Existing childElement (all works correctly)
let sp2 = document.getElementById("childElement");
parentDiv.insertBefore(newNode, sp2);
// End test case [ 1 ]
// Begin test case [ 2 ] : childElement is of Type undefined
sp2 = undefined; // Non-existent node of id "childElement"
parentDiv.insertBefore(newNode, sp2); // Implicit dynamic cast to type Node
// End test case [ 2 ]
// Begin test case [ 3 ] : childElement is of Type "undefined" (string)
sp2 = "undefined"; // Non-existent node of id "childElement"
parentDiv.insertBefore(newNode, sp2); // Generates "Type Error: Invalid Argument"
// End test case [ 3 ]
<div id="parentElement">
<span id="childElement">foo bar</span>
</div>
// Create a new, plain <span> element
const sp1 = document.createElement("span");
// Get the reference element
const sp2 = document.getElementById("childElement");
// Get the parent element
const parentDiv = sp2.parentNode;
// Insert the new element into before sp2
parentDiv.insertBefore(sp1, sp2);
Hinweis:
Es gibt keine insertAfter()-Methode.
Sie kann emuliert werden, indem die Methode insertBefore mit Node.nextSibling kombiniert wird.
Im vorherigen Beispiel knnte sp1 nach sp2 eingefgt werden, indem:
parentDiv.insertBefore(sp1, sp2.nextSibling);
Wenn sp2 kein nchstes Geschwisterelement hat, dann muss es das letzte Kind sein sp2.nextSibling gibt null zurck, und sp1 wird am Ende der Kindknotenliste eingefgt (unmittelbar nach sp2).
Einfgen eines Elements vor dem ersten Kindelement unter Verwendung der
firstChild-Eigenschaft.
// Get the parent element
const parentElement = document.getElementById("parentElement");
// Get the parent's first child
const theFirstChild = parentElement.firstChild;
// Create a new element
const newElement = document.createElement("div");
// Insert the new element before the first child
parentElement.insertBefore(newElement, theFirstChild);
Wenn das Element kein erstes Kind hat, dann ist firstChild null. Das Element wird dennoch am Ende des Elternteils, nach dem letzten Kind, angehngt.
Da das Elternelement kein erstes Kind hatte, hatte es auch kein letztes Kind. Folglich ist das neu eingefgte Element das einzige Element.
| Spezifikation |
|---|
| DOM # dom-node-insertbefore |
Node.removeChild()Node.replaceChild()Node.appendChild()Node.hasChildNodes()Element.insertAdjacentElement()Element.prepend()Element.before()Element.after()NodeAbortControllerAbortSignalAbstractRangeAttrCDATASectionCharacterDataCommentCustomEventDOMErrorDOMExceptionDOMImplementationDOMParserDOMTokenListDocumentDocumentFragmentDocumentTypeElementEventEventTargetHTMLCollectionMutationObserverMutationRecordNamedNodeMapNodeIteratorNodeListProcessingInstructionQuotaExceededErrorRangeShadowRootStaticRangeTextTreeWalkerXMLDocumentXPathEvaluatorXPathExpressionXPathResultXSLTProcessorDer Bauplan fr ein besseres Internet.
Teile dieses Inhalts sind 19982026 von einzelnen mozilla.org-Mitwirkenden. Inhalte sind verfgbar unter einer Creative-Commons-Lizenz.
| Web Proxy Viewer | New URL | Original Page |