كيف لي بتعويض محتوى داخل صفحة Html باستخدام javascript؟

أريد تعويض محتوى داخل صفحة بكود html، وذلك باستعمال دوال بلغة Javasript، كما هو موضح:

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");
		myDiv.replaceChild(NewH2,oldP);
	}
window.onload=function() {
	document.getElementById("btn").onclick=replaceHeading;
}

كود صفحة 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>

لكن الكود لا يعمل، فما الطريقة الأنسب لفعل ذلك؟