使用jQuery從AJAX請求中斷HTML

Question

我正在解析XML文件並嘗試將輸出返回給div。但是，由於某些原因.append（）似乎沒有生成正確的HTML輸出。

這裏是JQuery的片段：

這將產生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構建爲一個字符串，然後一次追加整個字符串。