html网页中用最简单的JS实现文字逐个显示的效果

关于使得文字能在网页中逐字显示的JS，网友分享的有很多，我从中选了几个试了一下，不是很理想。

第一个：

<p id="aa"></p>
<div style="display:none" id="w">人生最美的事情就是能和你相遇！</div>
<script src="jquery.min.js"></script>
<script type="text/javascript">
    window.onload = type;
    var index = 0;
    var word = $("#w").html();
    function type(){
        $("#aa").html(word.substring(0,index++));
        if(index > word.length) {
            return;
        } else {
            setTimeout(type,50);
        };
    }
</script>

这个我是真搞不通，我承认自己是小白，试了一下，除了空白，没见到一丁点反应。然后我试着将<div>当中的“display:none”去掉，结果，一刷新，整句话齐刷刷显现出来，呢么，到底是啥意思？<