javascript - 动态在另一个内部创建div

我正在尝试使用jquery在另一个内部动态创建div，但是没有显示出来。我的代码是：

$(document).ready(function()
{
    $('#well_show').click(function(){
        $("#gen_div").empty(); //empty previous generated divs if any
        $("#gen_div").append("<div id='well'></div>"); //create new div
        $('#well').css("height","500px","width","500px","background-color","red");
    });
});

我究竟做错了什么？

最佳答案

您的.css语法不正确，您应该传入一个对象（see the docs表示有效的重载）。就目前而言，您正在访问css( propertyName, value )重载，因此仅应用height属性。

$("#well").css({
    height: 500,
    width: 500,
    backgroundColor: "red"
});

我已对您的代码进行了一些清理（已替换document.ready并链接了empty和append调用：

$(function() {
    $('#well_show').click(function(){
        $("#gen_div").empty().append("<div id='well'></div>"); //create new div
        $("#well").css({
            height: 500,
            width: 500,
            backgroundColor: "red"
        });
    });
});

jsFiddle Demo