DocumentFragment: moveBefore() Methode

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

DiemoveBefore() Methode derDocumentFragment-Schnittstelle bewegt einen angegebenenNode innerhalb des aufrufendenDocumentFragment als direktes Kind vor einen angegebenen Referenzknoten.

Syntax

moveBefore(movedNode, referenceNode)

Parameter

movedNode: EinNode, der den zu verschiebenden Knoten darstellt. Beachten Sie, dass dies einElement oder einCharacterData Knoten sein muss.
referenceNode: EinNode, vor demmovedNode verschoben wird, odernull. Wenn der Wertnull ist, wirdmovedNode am Ende der Kindknoten des aufrufendenDocumentFragment eingefügt.

Ausnahmen

HierarchyRequestErrorTypeError

In den folgenden Situationen ausgelöst:

Der angegebenemovedNode ist bereits zum DOM hinzugefügt, und Sie versuchen, ihn innerhalb einesDocumentFragment zu verschieben.
Sie versuchen,movedNode zwischen zwei verschiedenen Dokumentfragmenten zu verschieben.
Der angegebenemovedNode ist keinElement oderCharacterData Knoten.

NotFoundErrorTypeError

Der angegebenereferenceNode ist kein Kind desDocumentFragment, für das SiemoveBefore() aufrufen, das heißt, das Fragment, in das SiemovedNode verschieben wollen.

TypeErrorTypeError

Das zweite Argument wurde nicht angegeben.

DiemoveBefore() Methode bewegt einen angegebenen Knoten an eine neue Stelle imDocumentFragment. Sie bietet eine ähnliche Funktionalität wie dieNode.insertBefore() Methode, außer dass sie den Knoten nicht entfernt und dann wieder einfügt. Das bedeutet, dass der Zustand des Knotens (der beim Verschieben mitinsertBefore() und ähnlichen Mechanismen zurückgesetzt würde) nach dem Verschieben beibehalten wird. Dies schließt ein:

Animation undÜbergangs Zustände.
Ladezustand von<iframe>.
Interaktivitätszustände (zum Beispiel:focus und:active).
Zustand vonFullscreen Elementen.
Offen/Geschlossen-Zustand vonPopovers.
Modalzustand von<dialog> Elementen (modale Dialoge werden nicht geschlossen).

Der Wiedergabezustand von<video> und<audio> Elementen ist nicht in der obigen Liste enthalten, da diese Elemente ihren Zustand beibehalten, wenn sie entfernt und wieder eingefügt werden, unabhängig von dem verwendeten Mechanismus.

Wenn Sie Änderungen am DOM mit einemMutationObserver beobachten, werden Knoten, die mitmoveBefore() verschoben wurden, alsentfernter Knoten undhinzugefügter Knoten aufgezeichnet.

`moveBefore()` Einschränkungen

Es gibt einige Einschränkungen, die Sie beachten müssen, wenn SiemoveBefore() verwenden:

Es funktioniert nur, wenn Sie einen Knoten innerhalb desselben Dokumentfragments verschieben.
Es wird nicht funktionieren, wenn Sie versuchen, einen Knoten, der bereits dem DOM hinzugefügt wurde, innerhalb einesDocumentFragment zu verschieben.

In solchen Fällen wirdmoveBefore() mit einerHierarchyRequestError Ausnahme fehlschlagen. Wenn die obigen Einschränkungen Anforderungen für Ihren speziellen Anwendungsfall sind, sollten Sie stattdessenNode.insertBefore() verwenden odertry...catch nutzen, um die Fehler zu behandeln, die in solchen Fällen auftreten.

Beispiele

Grundlegende`moveBefore()` Nutzung

In diesem Demo illustrieren wir die grundlegende Nutzung vonmoveBefore().

HTML

Das HTML enthält drei<button> Elemente und ein<article> Element. Wir werden die Buttons verwenden, umDocumentFragment Instanzen in das<article> einzufügen und es zu leeren.

html

<button>Insert fragment</button><button>Insert modified fragment</button><button>Clear</button><article></article>

CSS

Wir stellen ein grundlegendes Styling für das Aussehen und den Abstand von Elementen bereit, die später als Kinder von mit JavaScript generiertenDocumentFragments in die Seite eingefügt werden.

css

#section1,#section2,#mover {  display: inline-block;  width: 200px;  height: 30px;  border: 5px solid rgb(0 0 0 / 0.25);  margin-top: 10px;}#section1,#section2 {  background-color: hotpink;}#mover {  background-color: orange;}

JavaScript

In unserem Skript definieren wir eine Funktion,createFragment(), die einDocumentFragment erstellt, das ein<div> Element und zwei<section> Elemente als unmittelbare Kinder enthält.

Wir hängen dann einen Klick-Ereignislistener an jedes<button> mittelsaddEventListener() an:

Der erste Button fügt dasDocumentFragment unverändert dem<article> Element#wrapper hinzu.
Der zweite Button fügt dasDocumentFragment dem<article> Element#wrapper hinzu, verwendet aber zuerstmoveBefore(), um das<div> zum zweiten Kind desDocumentFragment statt zum ersten zu machen.
Der dritte Button leert das<article> Element#wrapper mittelsinnerHTML.

const wrapper = document.getElementById("wrapper");const insertBtn1 = document.getElementById("insert1");const insertBtn2 = document.getElementById("insert2");const clearBtn = document.getElementById("clear");function createFragment() {  const fragment = new DocumentFragment();  const divElem = document.createElement("div");  const section1 = document.createElement("section");  const section2 = document.createElement("section");  divElem.id = "mover";  section1.id = "section1";  section2.id = "section2";  fragment.appendChild(divElem);  fragment.appendChild(section1);  fragment.appendChild(section2);  return fragment;}insertBtn1.addEventListener("click", () => {  const fragment = createFragment();  wrapper.appendChild(fragment);});insertBtn2.addEventListener("click", () => {  const fragment = createFragment();  fragment.moveBefore(    fragment.querySelector("#mover"),    fragment.querySelector("#section2"),  );  wrapper.appendChild(fragment);});clearBtn.addEventListener("click", () => {  wrapper.innerHTML = "";});

Ergebnis

Das gerenderte Beispiel sieht wie folgt aus:

Versuchen Sie, die ersten beiden Buttons einige Male zu klicken und bemerken Sie, wie dieDocumentFragment Struktur vom zweiten Button modifiziert wird.