EN
JavaScript - replace existing HTML element
3
points
In this article, we would like to show you how to replace existing HTML element using replaceChild() method in JavaScript.
Quick solution:
var oldElement = document.querySelector("#element");
var newElement = document.createElement("div");
newElement.innerText = 'This is new element...';
oldElement.parentNode.replaceChild(newElement, oldElement);
Practical examples
Example 1
In this example, we will replace the element with a new div element.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<div id="element">This is old element...</div>
<script>
var oldElement = document.querySelector("#element");
var newElement = document.createElement("div");
newElement.innerText = 'This is new element...';
oldElement.parentNode.replaceChild(newElement, oldElement);
</script>
</body>
</html>
Example 2
In this example, we will replace child-2 element with a new paragraph element.
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<div id="parent">
<p id="child-1">This is a paragraph 1.</p>
<p id="child-2">This is a paragraph 2.</p>
</div>
<script>
var parent = document.querySelector("#parent");
var child = document.querySelector("#child-2");
var paragraph = document.createElement("p");
paragraph.innerText = 'This is new paragraph.';
parent.replaceChild(paragraph, child);
</script>
</body>
</html>