Replace a DOM Element with Another DOM Element in Place
Last Updated :
17 Oct, 2024
To replace a DOM element with another DOM element in JavaScript, you can use the replaceChild() method.
This allows to swap one element for another in the DOM, keeping the new element in the same position as the replaced one.
parentNode Property
This property returns the parent node of the defined node, as a Node object.
Syntax:
node.parentNode
Return value:
It returns a node object, which represents the parent node of a node, or null if there is no parent.
replaceChild() Method:
This method replaces a child node with a new node. This new node can be an existing node in the document, or can be newly created.
Syntax:
node.replaceChild(newNode, oldNode)
Return value:
It returns a node object, which represents the replaced node.
Example 1: This example creates a new <span> element and replace it with the <a> element using parentNode property and replace() method.
html
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript | Replace dom element in place.
</title>
</head>
<body style="text-align:center;" id="body">
<p id="GFG_UP" style="font-size: 15px; font-weight: bold;">
</p>
<div>
<a id="a" href="#">GeeksforGeeks</a>
</div>
<br>
<button onclick="gfg_Run()">
Click here
</button>
<p id="GFG_DOWN" style="color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
let el_up = document.getElementById("GFG_UP");
let el_down = document.getElementById("GFG_DOWN");
let today = 'Click button to replace <a> element in DOM';
el_up.innerHTML = today;
function gfg_Run() {
let aEl = document.getElementById("a");
let newEl = document.createElement("span");
newEl.innerHTML = "replaced text!";
aEl.parentNode.replaceChild(newEl, aEl);
el_down.innerHTML =
"<a> element is replaced by the <span> element.";
}
</script>
</body>
</html>
Output:
Example 2: This example creates a new <a> element and replace it with the previous <a> element using parentNode property and replace() method keeping the href property same.
html
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript | Replace dom element in place.
</title>
</head>
<body style="text-align:center;" id="body">
<p id="GFG_UP" style="font-size: 15px; font-weight: bold;">
</p>
<div>
<a id="a" href="https://www.geeksforgeeks.org">GeeksforGeeks</a>
</div>
<br>
<button onclick="gfg_Run()">
Click here
</button>
<p id="GFG_DOWN" style="color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
let el_up = document.getElementById("GFG_UP");
let el_down = document.getElementById("GFG_DOWN");
let today = 'Click button to replace <a> element in DOM';
el_up.innerHTML = today;
function gfg_Run() {
let aEl = document.getElementById("a");
let newEl = document.createElement("a");
newEl.innerHTML = "New GFG link!";
newEl.href = "https://www.geeksforgeeks.org";
aEl.parentNode.replaceChild(newEl, aEl);
el_down.innerHTML =
"<a> element is replaced by the new <a> element.";
}
</script>
</body>
</html>
Output:
Supported browsers:
- Google Chrome
- Mozilla Firefox
- Safari
- Opera
Similar Reads
jQuery | Move an element into another element There are two methods to move an element inside another element are listed below: Method 1: Using append() method: This append() Method in jQuery is used to insert some content at the end of the selected elements. Syntax: $(selector).append( content, function(index, html) ) Parameters: This method a
2 min read
How to replace an HTML element with another one using JavaScript? Replacing an HTML element with another using JavaScript allows for dynamic modification of webpage content without reloading the entire page. Document Object Model (DOM) is a platform and language-neutral interface that is used by programs and scripts to dynamically access the content, style, and st
2 min read
How to replace all words with another words in HTML ? The JavaScript replace() method is used to replace any occurrence of a character in a string or the entire string. It searches for a string corresponding to either a particular value or regular expression and returns a new string with the modified values. One can also use regular expressions instead
3 min read
How to get/change the HTML with DOM element in JavaScript ? In order to get/access the HTML for a DOM element in JavaScript, the first step is to identify the element base on its id, name, or its tag name. Then, we can use inner.HTML or outer.HTML to get the HTML. Using the getElementById() method: This method gets/identifies the DOM elements using its ID an
3 min read
Remove all the child elements of a DOM node in JavaScript In HTML, child elements are nested within parent elements, and there are times when you may need to remove these child elements from the DOM. This can be done using JavaScript DOM methods. In this article, we'll explore two common methods for removing child elements from a DOM node.Why Remove Child
3 min read