如何在html <div>中引用脚本对象？

Question

我在index.html文件中创建了一个脚本对象。它应该用<div>显示我的游戏板，但没有任何东西。我尝试了很多东西，这是我尝试过的最后一件事。

      <script type = "text/javascript">
        $( document ).ready( function() ){
            var game = Sudoku.getInstance();
            $('#container').append( game.getGameBoard() );
            $('#validate').click( function(){
                game.validate();
            } );
            $('#reset').click( function(){
                game.reset();
            });
        } );
      </script>
      <h2>  Sudoku Game Online </h2>
        <div id = "container"> 
            <script type = "text/javascript">
            $( document ).ready( function() ){
                var game = Sudoku.getInstance();
                $document.getElementById("container").innerHTML= ( game.getGameBoard() );
            </script>
        </div>

但以下是我的开始。问题是页面正在加载但容器没有显示网格或其中的任何内容。

   <script type = "text/javascript">
        $( document ).ready( function() ){
            var game = Sudoku.getInstance();
            $('#container').append( game.getGameBoard() );
            $('#validate').click( function(){
                game.validate();
            } );
            $('#reset').click( function(){
                game.reset();
            });
        } );
        </script>

        <h2>  Sudoku Game Online </h2>
        <div id = "container"> </div>