To replace an HTML element, the element.
replaceChild
(newNode, oldNode) method is used.
JS
window.onload = function() {
let p = document.createElement("p");
p.innerHTML = "This is new";
// Replaces the first p with the new one
let parent = document.getElementById("demo");
parent.replaceChild(p, document.getElementById("p1"));
};
HTML
<div id="demo">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
Note: The code above creates a new paragraph element that replaces the existing
p1
paragraph