jQuery append() issue in IE

Question

Hi All, I have the following script which I am running. It loops through each table in the page and appends "Table n [Table Title]" below each table.

This script works fine in Chrome, Mozilla but not IE 6 or 7. No errors are captured. Can anyone help with explaining if I have missed something here in my script or is this a bug in jQuery? If this is a jQuery issue, can anyone suggest a workaround?

        $('table').each(function(index,value){
        var obj = $(this).attr('title');
        var i = index;
        var txt = '<span class="toc-caption">Table '+(i+1)+' '+obj+'</span>';
        $(this).append(txt);
    });

Thanks in advance

Answer 1

Your appending a span to a table which of course is not correct and quite rightly ie is blowing up.

Try .after or you could use the caption tag of the table

 $('table').each(function(index,value){
    var obj = $(this).attr('title');
    var i = index;
    var txt = '<span class="toc-caption">Table '+(i+1)+' '+obj+'</span>';
    $(this).after(txt);