Добавив текст выходя за пределы DIV

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> 

Я получаю это в Google Chrome, не уверен, что IE8 +

Answer 1

попробуйте этот код

когда добавить первый "<div id='divSlot-" + data.id + "'>" браузер сделать его как полный div т.е. закрыть DIV тег автоматически .so это лучше, если вы добавите все в одном приложении, чтобы сделать его быстрее n правильным.

$.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>');