Skip to content
JS
Recipe · DOM

How to Move Elements with JavaScript

Published 23 Jun 20233 methods

Quick answer

By appendChild() method
// Get the element you want to move
 var elementToMove = document.getElementById('moveMe');

 // Get the new parent element
 var newParent = document.getElementById('newParent');

 // Move the element
 newParent.appendChild(elementToMove);

Other methods on this page: By insertBefore() method, By replaceChild() method

By appendChild() method

The appendChild() function in JavaScript allows us to move an element from one location to another in the DOM. This function essentially takes a node from its current position in the DOM and moves it to become the last child node of a specified parent node. Let’s understand this better with an example. 


 // Get the element you want to move
 var elementToMove = document.getElementById('moveMe');

 // Get the new parent element
 var newParent = document.getElementById('newParent');

 // Move the element
 newParent.appendChild(elementToMove);

How it works

The appendChild() function works by removing the specified child node from its current parent node and adding it to the end of the list of child nodes of a specified parent node. If the child node already exists in the DOM, it will be removed from its current parent node before being appended to the new parent node.

  • Step 1: Identify the element you want to move. We’re using the document.getElementById method to select the element with the id of ‘moveMe’.
  • Step 2: Identify the new parent element. Here, we’re selecting the element with the id of ‘newParent’.
  • Step 3: Use the appendChild() method to move the identified element to become the last child of the new parent element. If the element was already somewhere in the DOM, it will be removed from its previous location before being appended to the new parent.

By insertBefore() method

The JavaScript insertBefore() method can be used to insert a node (element) before another node within a parent node (element). This can be better understood with the help of an example. 


var parentNode = document.getElementById("parentElement");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a new element";
var referenceNode = document.getElementById("referenceElement"); 
parentNode.insertBefore(newNode, referenceNode);

How it works

The insertBefore() method inserts a node before a reference node as a child of a specified parent node. In the provided example, a new paragraph node is created and then inserted before a reference node in the parent node.

  • First, we acquire the parent node by using the method document.getElementById() with the id of the parent node as a parameter.
  • Next, we create a new node. In this case, it’s a paragraph element created with document.createElement(“p”). We set its innerHTML to “This is a new element”.
  • We then get the reference node, again using the document.getElementById() method, with the id of the reference node as a parameter.
  • Finally, we call the insertBefore() method on the parent node. We pass the new node and the reference node as arguments. This will insert the new node immediately before the reference node within the parent node.

By replaceChild() method

The replaceChild() method in JavaScript allows you to replace a child node with a new node in the HTML DOM. It effectively swaps out one node for another. Let’s understand this better with an example.


var parentNode = document.getElementById("parent");
var oldChildNode = document.getElementById("oldChild");
var newChildNode = document.createElement("p");

newChildNode.innerText = "This is the new child node text";

parentNode.replaceChild(newChildNode, oldChildNode);

How it works

The replaceChild() method works by targeting a parent node, and then replacing a specified child node of this parent with a new node. This change is directly reflected in the HTML DOM.

  • First, we need to select the parent node. In our example, the parent node is selected using the method getElementById(“parent”) which selects the element with the id ‘parent’.
  • Then, we select the old child node we want to replace. This is done using getElementById(“oldChild”) which selects the element with the id ‘oldChild’.
  • Afterwards, we create the new node that we want to replace the old child with. This is done using the method createElement(“p”) which creates a new paragraph element. We set the inner text of this new node to “This is the new child node text”.
  • Finally, we use the replaceChild(newChildNode, oldChildNode) method on the parent node. This method takes two arguments, the new child node and the old child node. It replaces the old child node with the new child in the parent node.