getElementById e innerHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Primo JS</title>

<script type="text/javascript" >

    function miao(){
        var massi = document.getElementById("test").innerHTML;
        //alert(massi);

        test.innerHTML = "<h1>FUNZIONAAAAAA!!!</h1>";

    }

</script>

</head>

<body>
<div style="text-align: center;" ><br><br>
    Funzione che usa: getElementById e innerHTML per modificare il contenuto del div con id: test
    clicando <span id="test" onclick="miao()"><b>QUI</b></span>, il testo cambia!
</div>


</body>
</html>