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:
xxxxxxxxxx1
var oldElement = document.querySelector("#element");2
3
var newElement = document.createElement("div");4
newElement.innerText = 'This is new element...';5
6
oldElement.parentNode.replaceChild(newElement, oldElement);
In this example, we will replace the element with a new div element.
xxxxxxxxxx1
2
<html>3
<body>4
<div id="element">This is old element...</div>5
<script>6
7
var oldElement = document.querySelector("#element");8
9
var newElement = document.createElement("div");10
newElement.innerText = 'This is new element...';11
12
oldElement.parentNode.replaceChild(newElement, oldElement);13
14
</script>15
</body>16
</html>In this example, we will replace child-2 element with a new paragraph element.
xxxxxxxxxx1
2
<html>3
<body>4
<div id="parent">5
<p id="child-1">This is a paragraph 1.</p>6
<p id="child-2">This is a paragraph 2.</p>7
</div>8
<script>9
10
var parent = document.querySelector("#parent");11
var child = document.querySelector("#child-2");12
13
var paragraph = document.createElement("p");14
paragraph.innerText = 'This is new paragraph.';15
16
parent.replaceChild(paragraph, child);17
18
</script>19
</body>20
</html>