How do I make JQuery append work in IE 7 and 8?

Question

This is my code:

$("#multimedia-tabs #"+response.currenttab+" #"+response.currenttab+"div").append(divHtml);

Where divHtml has the html li tags

It works fine in FF and chrome but not in IE7 and 8 :(

Tried many alternatives available on this site but no joy!

Please help

$(document).ready(function() {
    $("#next").live('click', function(){getMultimedia($(this).attr('page'), $(this).attr('url'));});
    $("#previous").live('click', function(){getMultimedia($(this).attr('page'), $(this).attr('url'));});
    $("a.page").live('click', function(e){getMultimedia($(this).attr('page'), $(this).attr('url'));});
});

function displayPage(response){
    response = JSON.parse(response);
    $("#multimedia-tabs #"+response.currenttab+" #"+response.currenttab+"div").html('');
    var divHtml = '';
    for(var i in response.page){
            divHtml += '<li><a class="medialink" href="'+response.page[i].MedUrl+'">'+response.page[i].MedUrl+'</a></li>';
    }
    divHtml += '';
    var target = response.currenttab+'div';
    $("#"+response.currenttab+"div").append(divHtml);
    updatePageLinks(response.currentPage, response.currenttab);
}

function updatePageLinks(page, currenttab){
    $("#multimedia-tabs #"+currenttab+" #previous").attr('page', page-1);
    $("#multimedia-tabs #"+currenttab+" #next").attr('page', page+1);
}

function getMultimedia(page,url){
    var url = url + "/page/" + page;
    $.post(url,
              {"format" : "json"},
              function(data){
                      displayPage(data);
              }, 'html');
    return false;
}

Answer 1

It looks like you have multiple of the same ID. IE won't tolerate this like other browsers will in some cases...it is invalid HTML. You need to give your elements unique IDs.

Also, you can then shorten your selector, since IDs should be unique to:

$("#"+response.currenttab+"div").append(divHtml);