Question

我有以下静态HTML：

<div id="divSlots"></div>

和一些jQuery：

success: function(data) {

if (data.d[0]) {

        $.each(data.d, function(index, data) {

            $("#divSlots").append("<div id='divSlot-" + data.id + "'>");
            $("#divSlots").append(data.time);
            $("#divSlots").append("</div>");

        });

为什么这给了我这个输出：

<div id="divSlots">
    <div id="divSlot-0"></div>
    09:00 
    <div id="divSlot-1"></div>
    09:30
</div>

而不是这个？

<div id="divSlots">
    <div id="divSlot-0">09:00</div>
    <div id="divSlot-1">09:30</div>
</div>

我在谷歌浏览器中得到此信息，不确定IE8 +

Answer 1

试试这段代码

当第一个追加"<div id='divSlot-" + data.id + "'>"时，浏览器将其显示为已满div，即自动关闭div标签。因此，如果您将所有内容附加到一个附加内容以使其更快更正确，则会更好。

$.each(data.d, function (index, data) {
    $("#divSlots").append("<div id='divSlot-" + data.id + "'>" + data.time + '</div>');
});

Answer 2

你不能附加“半个div”可以这么说。您的浏览器显示完整的div，然后显示data.time，然后省略最后一个结束div。请改用：

$("#divSlots").append(
    '<div id="divSlot-' + data.id + '">' + data.time + '</div>'
);

Answer 3

$("#divSlots").append('<div id="divSlot-' + data.id + '">' + data.time + '</div>');

附加文本在div之外

3 个答案: