Is it possible to reload a page in javascript but update the original HTML defined in the body tag? An example is below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<script language="javascript" type="text/javascript">
window.onload = function(){
document.getElementById("button").addEventListener('click', () => {
document.body.innerHTML = `<h1> ${Math.floor(Math.random() * 99999)}`;
location.reload()
});
}
</script>
<body>
<h1>Hehe</h1>
<button id = "button">Reset</button>
</body>
</html>
The above will change the original body tag to a random number when "button" is clicked on and as expected, the body tag will revert back to its original state after refreshing (though it will briefly show the updated state before refreshing).
Is it possible to have the body html remain different even after "refresh" is called?