problems with form and ierHTML on javascript

Yesterday i was making a code that shows in a text content what you write in the form input. I wrote this:

<p id="demo">
Show code
</p>
<form>
    <input type="text" id="clo" /> <button onclick="myFunctio()">Try it</button> <script type="text/javascript">
//<![CDATA[
    function myFunctio() {
    var bub = document.getElementById("clo").value
    var str = document.getElementById("demo").ierHTML; 
    var res = str.replace("code", bub);
    document.getElementById("demo").ierHTML = res;
    }
    //]]>
    </script>
</form>

the problem with this code is that when you click the button it substitute the text for a few time and then it refresh the page. How can i fix this?