'Reloading Page using javascript but updating original body HTML

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?

javascripthtml


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions