Question

I’m not quite sure what I am doing wrong and there isn’t any indication this shouldn’t work in IE. But the following code doesn’t add the <dd> elements in .after() to the DOM:

shouts_list_selector = $("#shouts dl#shouts_list");

shout_object = $('<dt>')
            .attr('id', shout.id)
            .text(shout.name)
            .append($('<span>').addClass('separator').text(' : '))
            .append($('<abbr>').addClass('timestamp').attr('title', shout.timestamp).text(shout.when))
            .after($('<dd>').html(shout.message))

shout_object.prependTo(shouts_list_selector).slideDown('slow', 'swing');

shouts is an object containing some messages. This works fine in Firefox and Chrome. But IE is missing the <dd>elements. Is there anything wrong with this example or a better way to do it?

Edit: Here is an example showing the issue: http://jsfiddle.net/sx6YH/

The DD tags show correctly when run in Firefox or Chrome. But not in IE.

Answer 1

I was able to get this working by just creating the <dd> tag and appendingTo the list right after the <dt> like so:

shouts_list = $('<dl>').attr('id', 'shouts_list');

$.each(shouts_object.shouts, function(id, shout) {
    $('<dt>')
        .attr('id', shout.id)
        .text(shout.name)
        .append($('<span>')
                .text(' : '))
        .append($('<abbr>')
                .attr('title', shout.timestamp)
                .text(shout.when))
        .appendTo(shouts_list);
    $('<dd>').html(shout.message)
        .appendTo(shouts_list);
});

shouts_list.appendTo('#shouts');

This works fine in both IE8 and Firefox. I feel like there may be a bug in IE8 with handling .after