どうしてこの状況でjQueryセレクタは効果がない?

<script>
    function show_button2(){
        $('#demo').html('<button>Button 2</button>');
    }
</script>

<button onclick="show_button2();">Button 1</button>
<div id='demo'></div>

'Button 1'をクリックして, 下の'Button 2' (id='demo'の<div>の中に) が出てほしいんです.

でも, 上のコードだと, 'Button 1'をクリックしても, 何も出ないんです.

上記のコードによると, どうしてそのjQueryセレクタ ($('#demo')) は効果がないの?

この問題を解決する方法は何ですか?