- By appendChild() method
- By insertBefore() method
- By replaceChild() method
Let’s explore each…
#1 – 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);
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.
#2 – By insertBefore() method
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.
#3 – By replaceChild() method
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.