使用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构建为一个字符串，然后一次追加整个字符串。