JavaScript Element moveBefore() Method

Beginner
5 min read
Updated: Nov 2026
3 examples
Method
Decorative image with the word MOVEBEFORE

Definition

The Element.moveBefore() method moves a node so it becomes a direct child of this element, placed before a reference node (MDN). Unlike insertBefore(), it does not remove-and-reinsert — so focus, animations, and similar state can survive.

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call el.moveBefore. Start with this line.

JavaScript
parent.moveBefore(movedNode, referenceNode)
CallWhat it does
parent.moveBefore(movedNode, referenceNode)Primary signature.
el.moveBefore(...)Call with the arguments your case needs.

Built into the browser. Call moveBefore(...) on an Element — no import required.

Library declarations
JavaScript
parent.moveBefore(movedNode, referenceNode)

Parameters

ParameterDescription
Parent elementRequired. New home for movedNode
movedNodeRequired. Element or CharacterData to move
referenceNodeRequired. Insert before this child, or end if null

Return Value

Return ValueDescription
*undefined

JavaScript Examples

Example 1 — Toggle Position (MDN)

Move a box before section 2, then back before section 1.

JavaScript
const wrapper = document.getElementById("wrapper");
const section1 = document.getElementById("section1");
const section2 = document.getElementById("section2");
const mover = document.getElementById("mover");
const out = document.getElementById("out");

document.getElementById("btn").addEventListener("click", () => {
  if (mover.nextElementSibling === section1) {
    wrapper.moveBefore(mover, section2);
  } else {
    wrapper.moveBefore(mover, section1);
  }
  out.textContent = [...wrapper.children].map((n) => n.id).join(", ");
});
Try It Yourself

How It Works

  1. Watch the next sibling. If it is section1, mover is still at the start.
  2. Move before section2 to place it between the sections.
  3. Otherwise move before section1 to restore the start position.
  4. List child ids so you can see the new order.

Example 2 — Append With null

Pass null as the reference to move a node to the end.

JavaScript
const list = document.getElementById("list");
const item = document.getElementById("first");
const out = document.getElementById("out");

list.moveBefore(item, null);
out.textContent = [...list.children].map((n) => n.textContent).join(", ");
Try It Yourself

How It Works

  1. Start with “One” first in the list.
  2. Call moveBefore(item, null) — MDN: null means append.
  3. “One” becomes last without a remove/reinsert reset.
  4. Read child text to confirm the new order.

Example 3 — Feature-Detect Fallback

Use moveBefore when present; otherwise insertBefore.

JavaScript
const parent = document.getElementById("list");
const node = document.getElementById("item");
const ref = document.getElementById("anchor");
const out = document.getElementById("out");

function moveSafe(parent, node, ref) {
  if (typeof parent.moveBefore === "function") {
    parent.moveBefore(node, ref);
    return "moveBefore";
  }
  parent.insertBefore(node, ref);
  return "insertBefore";
}

out.textContent = moveSafe(parent, node, ref);
Try It Yourself

How It Works

  1. Feature-detect with typeof parent.moveBefore === "function".
  2. Prefer moveBefore so state can be preserved.
  3. Fall back to insertBefore on Limited / missing engines.
  4. Report which path ran so you can verify in DevTools.
Compatibility

Browser Support

Element.moveBefore() is Limited availability on MDN (not Baseline). Support includes recent Chromium and Firefox; Safari currently lacks support. See the MDN moveBefore() reference.

✓ Limited availability

Element.moveBefore()

State-preserving DOM move. Feature-detect and fall back to insertBefore().

Limited Not Baseline
Google Chrome 133+
Yes
Microsoft Edge 133+
Yes
Mozilla Firefox 140+
Yes
Opera 118+
Yes
Apple Safari Not supported
No
Internet Explorer Not supported
No
moveBefore() Partial

Bottom line: Prefer moveBefore when available for focus/animation-safe reorders. Always keep an insertBefore fallback.

Frequently Asked Questions

MDN: it moves a given Node inside the invoking element as a direct child, before a reference node. Unlike insertBefore(), it does not remove and reinsert the node, so element state is preserved.
MDN marks Element.moveBefore() as Limited availability (not Baseline). It is not Deprecated or Non-standard, but support is incomplete — feature-detect before production use.
Nothing useful — the return value is undefined (MDN).
If referenceNode is null, movedNode is inserted at the end of the invoking element’s child nodes (MDN).
insertBefore() removes and reinserts the node, which can reset focus, animations, and popover state. moveBefore() moves the node while preserving that state (MDN).
HierarchyRequestError for invalid moves (wrong document, connected/disconnected mismatch, ancestor moves, non-Element/CharacterData). NotFoundError if referenceNode is not a child of the parent. TypeError if the second argument is missing.

Next: prepend()

Continue with the Element prepend() method.

prepend() →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

14 people found this page helpful

JavaScript Element matches() Method JavaScript Element prepend() Method