Object doesn't support property or method 'append' in IE9

I got the same error on IE11 when using the native function document.body.append.

You can either use document.body.appendChild or insert the polyfill from MDN (npm).


window.item is a special method in Internet Explorer and since the code you pasted wasn't declaring a local variable item it was trying to reassign a native method in IE. IE didn't allows the reassignment to happen so you didn't really get the jQuery object you were expecting in the item variable and therefore the append method isn't available.

The easiest way to fix the code is to add a var right before you use the item variable. I've thrown together a jsFiddle showing how it fixes the issue in IE http://jsfiddle.net/httyY/

$.ajax({
    url:    script_url,
    type:   "post",
    data: {"cat": id},
    dataType: "json"
}).success(function(result){
    if(result.status == "ok"){
        $.each(result.data, function(i, elem){
            var item = $("<div class='body-area'>").append($("<img src='" + elem.image + "'>"));
            var link = $("<a href='#results' class='btn'>");
            link.text(elem.name);
            link.data('subcat-id', elem.id);
            item.append(link);

            wrap.append(item);

        });
        $('.second .body').html(wrap).slideDown('fast');
    }
});