Question

我正在尝试使用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"); 
    }); 
});

我做错了什么？

Answer 1

您的.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

Answer 2

你不是追加HTML，而是追加jQuery节点。像这样：

$("#gen_div").append($("<div></div>").attr('id', 'well')); //create new div

Answer 3

使用

.html("your html")

用原始html填充

动态创建另一个div

3 个答案: