Element: moveBefore() method

Limited availability

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

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The moveBefore() method of the Element interface moves a given Node inside the invoking node as a direct child, before a given reference node.

Syntax

moveBefore(movedNode, referenceNode)

Parameters

movedNode: A Node representing the node to be moved. Note that this must be an Element or a CharacterData node.
referenceNode: A Node that movedNode will be moved before, or null. If the value is null, movedNode is inserted at the end of the invoking node's child nodes.

Exceptions

HierarchyRequestError TypeError

Thrown in any of the following situations:

The specified movedNode is not part of the DOM, and you are trying to move it inside a node that is part of the DOM, or vice versa.
The specified movedNode is an ancestor of the Element moveBefore() is being called on.
You are trying to move movedNode between two different documents.
The specified movedNode is not an Element or CharacterData node.

NotFoundError TypeError

The specified referenceNode is not a child of the node you are calling moveBefore() on, that is, the node you are trying to move movedNode inside.

TypeError TypeError

The second argument was not supplied.

The moveBefore() method moves a given node to a new place in the DOM. It provides similar functionality to the Node.insertBefore() method, except that it doesn't remove and then reinsert the node. This means that the state of the node (which would be reset if moving it with insertBefore() and similar mechanisms) is preserved after the move. This includes:


Try clicking the

`Demonstrating state preservation`

In this demo we provide multiple mechanisms to move a

 element containing a YouTube embed between two different containers, demonstrating how moveBefore() preserves the play state of the embed, but the other mechanisms do not.
HTML
The HTML features an 
 element containing two  elements. The first  element contains a  element containing the YouTube embed code. We also have a  element containing three 
  
  


CSS
We use flexbox for the layout to make the two 
 elements sit side-by-side, and space the buttons evenly inside the controls .
css
#wrapper,
#controls {
  width: 100%;
  display: flex;
}

#wrapper {
  margin-bottom: 10px;
}

section {
  flex: 1;
  padding: 10px;
}

#controls {
  display: flex;
  justify-content: space-around;
}

#section1 {
  background-color: hotpink;
}

#section2 {
  background-color: orange;
}

#mover {
  max-width: 100%;
  background-color: black;
}

JavaScript
In our script, we attach click event listeners to each 
Specifications
Specification
DOM 
# dom-parentnode-movebefore
Browser compatibility
See also

Document.moveBefore()
DocumentFragment.moveBefore()
Node.insertBefore()
Help improve MDN
Was this page helpful to you?
Learn how to contribute.This page was last modified on May 9, 2025 by MDN contributors.
View this page on GitHub • Report a problem with this content

Element: moveBefore() method

Syntax

Parameters

Return value

Exceptions

Description

`Demonstrating state preservation`

HTML

CSS

JavaScript

Result

Specifications

Browser compatibility

See also