HTML rompu à partir de la requête AJAX à l'aide de JQuery

Question

Je suis en train d'analyser un fichier XML et d'essayer de renvoyer la sortie vers un div. Cependant, pour une raison quelconque, .append() ne semble pas générer la sortie HTML correcte.

Voici l'extrait JQuery:

Le code HTML cela produit est la suivante:

<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> 

Toute idée pourquoi les balises sont en cours fermé prématurément? Je suis un peu perdu. S'il y a une autre façon de le faire, j'apprécierais que vous m'indiquiez dans la bonne direction.

Merci d'avance!

Answer 1

append() n'est pas un ajout de chaîne. Il travaille sur le DOM en cours de route. Lorsque vous ajoutez un <ul>, il ajoute automatiquement la balise de fermeture. Tout ce que vous ajoutez au balisage après cela vient plus tard.

Essayez plutôt cela.

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

Lorsque vous ajoutez l'UL, il ajoute un élément complètement formé et fermé. Il est préférable de créer tout le code HTML en tant que chaîne, puis d'ajouter la chaîne entière en même temps.