jQueryのを使用したAJAX要求から壊れたHTML

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()は、文字列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を構築して、一度に全体の文字列を追加することをお勧めします。