JQuery를 사용하여 AJAX 요청에서 깨진 HTML

Question

XML 파일을 구문 분석하고 출력을 div로 반환하려고합니다. 그러나 어떤 이유로 .append()가 올바른 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> 

어떤 생각이 왜 태그가 조기에 종료되고 다음과 같이이 생산

html로는 : 여기

은 JQuery와 조각인가? 나는 약간의 손실이 있습니다. 이 일을해야하는 또 다른 방법이 있다면 나는 올바른 방향으로 나를 가리켜 주셔서 감사합니다.

미리 감사드립니다.

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을 문자열로 작성한 다음 전체 문자열을 한 번에 추가하는 것이 좋습니다.