JSFiddle - React, Tailwind, and code Playground

HTML

<div id="id1">
<p id="para1">Welcome to my web page.</p>
<p id="para2">Take a look around.</p>
<input type="button" id="btn" value="Replace Element">
<br>
<input type="button" value="refresh" onclick="location.reload()">
</div>

JavaScript

function replaceHeading(){
		var newH2=document.createElement("h2");
		var newH2Text=document.createTextNode("Welcome");
		newH2.appendChild(newH2Text);
		var myDiv=document.getElementById("id1");
		var oldP=document.getElementById("para1");
    console.log(myDiv, newH2, oldP);
		myDiv.replaceChild(newH2,oldP);
	}

document.getElementById("btn").onclick=replaceHeading;