Question

我试图在点击按钮时创建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>

的Javascript

var row1 = [];
$(document).ready(function() 
{
    $('#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]);
    }   
    });
});

CSS

#startbtn
{
    height: 60px;
    width: 100px;
    border-radius: 5px;
    background-color: #69D2E7;
    text-align: center;
    color: #000000;
    font-family: Arial;
    opacity: 0.5;
    margin: auto;
}
#game 
{ 
    display: none;
    margin: auto;
}
#game2
{ 
    display: none;
    margin: auto;
}
.grid 
{
    display: inline-block;
    background-color: #000000;
    width: 20px;
    height: 20px;
    border-radius: 2px;
}

Answer 1

工作示例： JS FIDDLE

为什么不使用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();
    });
});

CSS

#game 
{ 
    margin: auto;
}

Answer 2

您需要取消隐藏game 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();
});

DEMO

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

2 个答案: