在向其附加数据后，div未显示

Question

我正在尝试动态创建以下div，如此小提琴

所示

http://jsfiddle.net/5axh3xzs/1/

我试过以下

http://jsfiddle.net/Lv5cn8xy/13/

但div没有显示

var json = [{
    "crustings": [{
        "crust_name": "kool crust ttttt",
            "crust_cost": "22"
    }],
        "toppings": [{
        "topping_name": "kool crust ttttt",
            "topping_cost": "22"
    }]
}];
quantity = 3;
creatediv();



function creatediv() {

    var addonsContent = $('<div class="popup_inner addonsContent"></div>');

    var popupheader = '<div class="popup_header">\
                    <h2>Addons</h2>\
                    <div class="rightAction">\
                        <a href="#" class="remove">Remove All</a>\
                        <a href="#" class="icon-ok-1 tick"></a>\
                    </div>\
                </div>';

    var addonsQtyWrap = $('<div class="addonsQtyWrap"></div>');

    var ulhtml = '<ul>';
    for (var i = 0; i <= quantity; i++) {
        if (i == 0) {
            ulhtml += '<li class="active">Qty-1</li>'
        } else {
            ulhtml += '<li>Qty-' + i + '</li>'
        }
    }

    ulhtml += '</ul>';

    addonsQtyWrap.append(ulhtml);


    var popup_content = $('<div class="popup_content">div class="popup_content_addonsWrap"></div></div>');


    for (var i = 0; i < json.length; i++) {
        var toppings = json[i].toppings;
        var crustings = json[i].crustings;

        var toppdata = '<div class="addonsListWrap"><h3>Toppings</h3><ul>';

        // For toppings
        for (var k = 0; k < toppings.length; k++) {
            toppdata += '<li>\
                                    <form>\
                                        <input type="checkbox"  data-mini="true"/>\
                                <label for="checkbox-mini-0">Topping items list</label>\
                                    </form>\
                                </li>';

        }

        toppdata += '</ul>';

        //  For Crustings

        var crustdata = '<div class="addonsListWrap"><h3>Crustings</h3><ul>';

        for (var j = 0; j < crustings.length; j++) {
            crustdata += '<li>\
                                    <form>\
                                        <input type="checkbox"  data-mini="true"/>\
                                   <label for="checkbox-mini-0">Crusting items list</label>\
                                    </form>\
                                </li>';

        }

        crustdata += '</ul>';


        popup_content.append(toppdata);
        popup_content.append(crustdata);

    }

    addonsQtyWrap.append(popup_content).append(popupheader).append(addonsContent);

    $("#test").append(addonsContent);

}

你能告诉我究竟问题在哪里吗？

Answer 1

我发现了两个问题，首先是popup_content缺少打开＆lt; 更改var popup_content = $('<div class="popup_content">div class="popup_content_addonsWrap"></div></div>'); 至 var popup_content = $('<div class="popup_content"><div class="popup_content_addonsWrap"></div></div>');

其次，您要将addonsContent追加到$("#test")它应该是      $("#test").append(addonsQtyWrap);