javascript无法在另一个div内创建div_Javascript_Jquery_Html_Css

javascript无法在另一个div内创建div

javascript jquery html css

javascript无法在另一个div内创建div,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图在点击按钮时创建10个div，但是什么都没有发生。我认为问题在于我的javascript，但控制台中没有显示任何内容。我做错了什么？我能做些什么来修复它？任何帮助都将不胜感激 HTML <!DOCTYPE html> <html> <head> <title> Space Invaders </title> <script type = 'text/ja

我试图在点击按钮时创建10个div，但是什么都没有发生。我认为问题在于我的javascript，但控制台中没有显示任何内容。我做错了什么？我能做些什么来修复它？任何帮助都将不胜感激

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>
        Space Invaders
        </title>
        <script type = 'text/javascript' src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="script.js" type="text/javascript">               </script>
    </head>
    <body>
    <div>
        <div id="startbtn"><br />Start Game
        </div>
        <br />
        <center>
        <div id="game" onClick = 'buttonClick'>
        </div>
        <div id="game2">
        </div>
        </center>
        <div id="titlepage">
        </div>
    </div>
    </body>
</html>

工作示例：

为什么不使用jquery创建DOM元素和附加

var row1 = [];
$(document).ready(function() 
{
    $('#startbtn').click(function(){
        for (var i = 0; i<9; i++)
    {
       var div = $("<div>").addClass("grid");
       div.appendTo($("#game"));
    }
    $("#game").show();
    });
});

您需要取消隐藏

游戏

DIV:

$('#startbtn').click(function(){
    for (var i = 0; i<9; i++) {
        row1[i] = document.createElement('div');
        row1[i].className = 'grid';
        document.getElementById('game').appendChild(row1[i]);
    }   
    $("#game").show();
});

$（'startbtn'）。单击（函数（）{
对于（var i=0；i）您的代码运行良好。您无法看到添加的div，因为#game
具有显示：none@Barmar如果您添加它作为答案，我将接受它。您没有指定新div的类。除此之外，它与原始代码等效，因此我不知道它如何解决他遇到的任何问题。
var row1 = [];
$(document).ready(function() 
{
    $('#startbtn').click(function(){
        for (var i = 0; i<9; i++)
    {
       var div = $("<div>").addClass("grid");
       div.appendTo($("#game"));
    }
    $("#game").show();
    });
});

#game 
{ 
    margin: auto;
}

$('#startbtn').click(function(){
    for (var i = 0; i<9; i++) {
        row1[i] = document.createElement('div');
        row1[i].className = 'grid';
        document.getElementById('game').appendChild(row1[i]);
    }   
    $("#game").show();
});