Question

I am populating a DIV with content returned from a callback that has multiple HTML items in it and each have their own classes associated. After I call .append however the content isn’t coming in with the proper associated styles.

$.ajax({
    type: "GET",
    url: "blah.xml",
    dataType: "xml",
    data: myData,
    success: function(xml) {
        $(xml).find('item').each(function(){
            var id = $(this).attr('appId');
            $('<li><h5 class="thing">' + id + '</h5>').appendTo('#results');
        });
    }
});

So it grabs the ID and sets the ID in there on an H5 with the class “thing”, it then appends to the DIV results. That works fine, but the problem is when this happens the class named “thing” never gets applied. Its definitely there, but not getting rendered.

Any ideas?

Answer 1

$('#results').append('<li><h5 class="thing">' + id + '</h5>');

So, for many reasons, including performance reasons, and autoclosing of <ul>, etc, I suggest you first build your whole subtree as string.

var s = '<ul>';
$(xml).find('item').each(function(){
    var id = $(this).attr('appId');
    s += '<li><h5 class="thing">' + id + '</h5></li>';
});
$('#results').append(s + '</ul>');