The task is to replace an element by another element in place using JavaScript. Below are the few methods:
-
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)
Parameters:
-
newNode: This parameter is required. It specifies the node object to insert.
-
oldNode: This parameter is required. It specifies the node object to remove.
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.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript | Replace dom element in place.
</title>
</head>
<body style="text-align:center;" id="body">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<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>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
var today = 'Click button to replace <a> element in DOM';
el_up.innerHTML = today;
function gfg_Run() {
var aEl = document.getElementById("a");
var 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:
-
Before clicking the button:
-
After clicking the button:
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.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript | Replace dom element in place.
</title>
</head>
<body style="text-align:center;" id="body">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p id="GFG_UP" style="font-size: 15px; font-weight: bold;">
</p>
<div>
<a id="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>
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
var today = 'Click button to replace <a> element in DOM';
el_up.innerHTML = today;
function gfg_Run() {
var aEl = document.getElementById("a");
var newEl = document.createElement("a");
newEl.innerHTML = "New GFG link!";
aEl.parentNode.replaceChild(newEl, aEl);
el_down.innerHTML =
"<a> element is replaced by the new <a> element.";
}
</script>
</body>
</html>
|
Output:
-
Before clicking the button:
-
After clicking the button:
Supported browser
- Google Chrome
- Mozilla Firefox
- Internet Explorer
- Safari
- Opera
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
16 Feb, 2021
Like Article
Save Article