Неработающий HTML из запроса AJAX с использованием JQuery

Question

Я анализирую XML-файл и пытаюсь вернуть вывод в div. Однако по какой-то причине .append (), похоже, не генерирует правильный вывод HTML.

Вот фрагмент JQuery:

var list = $('<div class="response">').appendTo(this);
list.append('<ul>');

$('item',data).each(function(i){
    var dow = $(this).find("day").text();
    var high = $(this).find("high").text();
    var low = $(this).find("low").text();
    var conditions = $(this).find("conditions").text();
    var icon = $(this).find("icon").text();

    list.append('<li style="background: url(' + icon + '.gif) no-repeat;"><b>' + dow + '</b> - ' + conditions + ' (Hi: ' + high + ', Low: ' + low + ')</li>');          
});

Этот HTML-код выглядит следующим образом:

<div class="response"></div>
<ul></ul>
    <li style="background: url(partlycloudy.gif) no-repeat;"><b>Wednesday</b> - Partly Cloudy (Hi: 50, Low: 43)</li>
    <li style="background: url(partlycloudy.gif) no-repeat;"><b>Thursday</b> - Partly Cloudy (Hi: 59, Low: 34)</li>
    <li style="background: url(partlycloudy.gif) no-repeat;"><b>Friday</b> - Partly Cloudy (Hi: 45, Low: 25)</li>
    <li style="background: url(chancesnow.gif) no-repeat;"><b>Saturday</b> - Chance of Snow (Hi: 36, Low: 22)</li>
    <li style="background: url(partlycloudy.gif) no-repeat;"><b>Sunday</b> - Partly Cloudy (Hi: 36, Low: 20)</li>
    <li style="background: url(partlycloudy.gif) no-repeat;"><b>Monday</b> - Partly Cloudy (Hi: 34, Low: 20)</li>

Есть идеи, почему теги закрываются преждевременно? Я немного растерялся. Если бы у меня был другой способ, я был бы признателен, если бы вы указали мне правильное направление.

Заранее спасибо!

Answer 1

append() не является добавлением строки. Он работает на живой DOM, как вы идете. Когда вы добавляете <ul>, он автоматически добавляет закрывающий тег. Все, что вы добавите в разметку после этого, будет позже.

Вместо этого попробуйте это.

var list = $('<div class="response">').appendTo(this);
var ul = $('<ul></ul>');

$('item',data).each(function(i){
    var dow = $(this).find("day").text();
    var high = $(this).find("high").text();
    var low = $(this).find("low").text();
    var conditions = $(this).find("conditions").text();
    var icon = $(this).find("icon").text();

    ul.append('<li style="background: url(' + icon + '.gif) no-repeat;"><b>' + dow + '</b> - ' + conditions + ' (Hi: ' + high + ', Low: ' + low + ')</li>');          
});
list.append(ul);

Answer 2

Когда вы добавляете UL, он добавляет полностью сформированный и закрытый элемент. Лучше собрать весь HTML как строку, а затем сразу добавить всю строку.