DocumentFragment: moveBefore() Methode

Syntax

moveBefore(movedNode, referenceNode)

Parameter

movedNode

Ein Node, der den zu verschiebenden Knoten darstellt. Beachten Sie, dass dies ein Element oder ein CharacterData-Knoten sein muss.

referenceNode

Ein Node, vor dem movedNode verschoben wird, oder null. Wenn der Wert null ist, wird movedNode am Ende der Kindknoten des aufrufenden DocumentFragment eingefügt.

Rückgabewert

Keiner (undefined).

Ausnahmen

HierarchyRequestError TypeError

Wird in einer der folgenden Situationen ausgelöst:

• Der angegebene movedNode ist bereits zum DOM hinzugefügt worden und Sie versuchen, ihn innerhalb eines DocumentFragment zu verschieben.
• Sie versuchen, movedNode zwischen zwei verschiedenen Dokumentfragmenten zu verschieben.
• Der angegebene movedNode ist kein Element oder CharacterData-Knoten.

NotFoundError TypeError

Der angegebene referenceNode ist kein Kind des DocumentFragment, auf dem Sie moveBefore() aufrufen, das heißt, des Fragments, in das Sie movedNode verschieben möchten.

TypeError TypeError

Das zweite Argument wurde nicht angegeben.

Beschreibung

Die moveBefore()-Methode verschiebt einen gegebenen Knoten an eine neue Stelle im DocumentFragment. Sie bietet eine ähnliche Funktionalität wie die Node.insertBefore()-Methode, außer dass sie den Knoten nicht entfernt und dann wieder einfügt. Das bedeutet, dass der Zustand des Knotens (der zurückgesetzt würde, wenn er mit insertBefore() und ähnlichen Mechanismen verschoben würde) nach der Verschiebung beibehalten wird. Dies umfasst:

• Animation- und Übergangs-Zustand.
• Ladezustand von <iframe>.
• Interaktivitätszustände (zum Beispiel, :focus und :active).
• Vollbild-Elementzustand.
• Offen/geschlossen Zustand von Popovers.
• Modalzustand von <dialog>-Elementen (modale Dialoge werden nicht geschlossen).

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

Beim Beobachten von Änderungen am DOM mit einem MutationObserver werden Knoten, die mit moveBefore() verschoben werden, als entfernte Knoten und hinzugefügte Knoten dokumentiert.

moveBefore()-Einschränkungen

Es gibt einige Einschränkungen, die bei der Verwendung von moveBefore() zu beachten sind:

• Es funktioniert nur, wenn ein Knoten innerhalb desselben Dokumentfragments verschoben wird.
• Es wird nicht funktionieren, wenn Sie versuchen, einen Knoten, der bereits zum DOM hinzugefügt wurde, innerhalb eines DocumentFragment zu verschieben.

In solchen Fällen wird moveBefore() mit einer HierarchyRequestError-Ausnahme fehlschlagen. Wenn die obigen Einschränkungen für Ihren speziellen Anwendungsfall Anforderungen darstellen, sollten Sie stattdessen Node.insertBefore() verwenden oder try...catch verwenden, um die Fehler zu behandeln, die in solchen Fällen auftreten.

Beispiele

Grundlegende Anwendung von moveBefore()

In diesem Beispiel veranschaulichen wir die grundlegende Verwendung von moveBefore().

HTML

Das HTML umfasst drei <button>-Elemente und ein <article>-Element. Wir werden die Schaltflächen verwenden, um DocumentFragment-Instanzen in das <article>-Element einzufügen und es zu leeren.

<button id="insert1">Insert fragment</button>
<button id="insert2">Insert modified fragment</button>
<button id="clear">Clear</button>
<article id="wrapper"></article>

CSS

Wir bieten einige grundlegende Stile für das Aussehen und die Anordnung von Elementen, die später auf der Seite als Kinder von JavaScript-generierten DocumentFragments eingefügt werden.

#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 ein DocumentFragment erstellt, das ein <div>-Element und zwei <section>-Elemente als unmittelbare Kinder enthält.

Wir fügen dann jeden <button> mit einem Klick-Ereignislistener über addEventListener() an:

• Die erste Schaltfläche fügt das DocumentFragment unverändert in das #wrapper <article>-Element ein.
• Die zweite Schaltfläche fügt das DocumentFragment in das #wrapper <article>-Element ein, verschiebt aber zuerst das <div> mit moveBefore() an die zweite Stelle als Kind des DocumentFragment, anstatt an die erste.
• Die dritte Schaltfläche leert das #wrapper <article>-Element mithilfe von innerHTML.

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 so aus:

Versuchen Sie, die ersten beiden Schaltflächen ein paar Mal zu klicken und beachten Sie, wie die DocumentFragment-Struktur von der zweiten Schaltfläche modifiziert wird.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Document.moveBefore()
• Element.moveBefore()
• Node.insertBefore()