DocumentFragment: moveBefore() Methode

movedNode

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

referenceNode

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

Keiner (undefined).

HierarchyRequestError TypeError

Wird in einer der folgenden Situationen ausgelöst:

• Der angegebene movedNode ist bereits zum DOM hinzugefügt 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, also des Fragments, in dem Sie movedNode verschieben möchten.

TypeError TypeError

Das zweite Argument wurde nicht bereitgestellt.

Die moveBefore()-Methode verschiebt einen gegebenen Knoten an eine neue Stelle im DocumentFragment. Sie bietet eine ähnliche Funktionalität wie die Node.insertBefore()-Methode, mit dem Unterschied, dass sie den Knoten nicht entfernt und dann erneut einfügt. Das bedeutet, dass der Zustand des Knotens (der zurückgesetzt würde, wenn er mit insertBefore() und ähnlichen Mechanismen verschoben wird) nach der Verschiebung erhalten bleibt. Dazu gehören:

• Animations- und Übergangs--Zustände.
• Ladezustand des <iframe>.
• Interaktivitätszustände (zum Beispiel :focus und :active).
• Vollbild--Zustand von Elementen.
• Offen/Geschlossen-Zustand von Popovers.
• Modaler Zustand 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 im DOM mit einem MutationObserver werden Knoten, die mit moveBefore() verschoben wurden, als entfernter Knoten und als hinzugefügter Knoten aufgezeichnet.

Es gibt einige Einschränkungen, die beim Verwenden von moveBefore() zu beachten sind:

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

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

In diesem Demo zeigen wir die grundlegende Verwendung von moveBefore().

HTML

Das HTML enthält drei <button>-Elemente und ein <article>-Element. Wir werden die Schaltflächen verwenden, um DocumentFragment-Instanzen in das <article> 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 rudimentäre Stile für das Aussehen und den Abstand der Elemente, die später als Kinder von JavaScript-generierten DocumentFragments auf der Seite eingefügt werden, an.

#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 jedem <button> über addEventListener() einen Klick-Eventlistener hinzu:

• Der erste Button fügt das DocumentFragment unverändert dem <article>-Element mit der ID #wrapper hinzu.
• Der zweite Button fügt das DocumentFragment dem <article>-Element mit der ID #wrapper hinzu, benutzt jedoch zuerst moveBefore(), um das <div> an die zweite Stelle des DocumentFragment zu verschieben, anstatt an die erste.
• Der dritte Button leert das <article>-Element mit der ID #wrapper, indem er innerHTML verwendet.

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 folgendermaßen aus:

Versuchen Sie, die ersten beiden Schaltflächen ein paar Mal zu klicken und beachten Sie, wie die DocumentFragment-Struktur durch die zweite Schaltfläche geändert wird.

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