jQuery를 사용하여 AJAX 요청에서 HTML이 깨졌습니다

StackOverflow https://stackoverflow.com/questions/1834912

  •  11-09-2019
  •  | 
  •  

문제

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>

태그가 왜 조기에 닫히고 있는지 아십니까? 나는 약간의 손실에있다. 다른 방법이 있다면이 작업을 수행해야 할 것입니다. 올바른 방향으로 나를 지적 해 주셔서 감사합니다.

미리 감사드립니다!

도움이 되었습니까?

해결책

append() 현악기가 아닙니다. 당신이 갈 때 라이브 돔에서 일하고 있습니다. 당신이 추가 할 때 a <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);

다른 팁

UL을 추가하면 완전히 형성되고 닫힌 요소가 추가됩니다. 전체 HTML을 문자열로 빌드 한 다음 한 번에 전체 문자열을 추가하는 것이 좋습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top