Object does not support property or add method in IE9

Question

this script works in firefox or chrome, but only gets half way in IE9, which is the best browser for our websites.

im im problem is that it throws this error.

SCRIPT438: object does not support property or method 'append' calc_ajax.js, line character 26

in this line: item.append (link);

and I'm stuck why. Any help would be greatly appreciated.

$(document).ready(function(){ $('.first a.btn').click(function(){ $('.first a.active').removeClass('active'); $(this).addClass('active'); $('.second .title').addClass('active'); var id = $(this).data('cat-id'); var wrap = $('<div>'); $.ajax({ url: script_url, type: "post", data: {"cat": id}, dataType: "json" }).success(function(result){ if(result.status == "ok"){ $.each(result.data, function(i, elem){ item = $("<div class='body-area'>").append($("<img src='" + elem.image + "'>")); 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'); } }); }); $('.second a.btn').live('click', function(){ $('.second .body-area.active').removeClass('active'); $(this).parent().addClass('active'); var sub_id = $(this).data('subcat-id'); $.ajax({ url: script_url, type: "post", data: {"subcat": sub_id}, dataType: "json" }).success(function(result){ if(result.status == "ok"){ $('.third .title').text(result.data.title); $('.third .body').html(result.data.body); $('.third').slideDown('fast'); } }); }); 

});

Answer 1

window.item is a special method in Internet Explorer, and since the code you entered did not declare the local variable item , it tried to reassign its own method in IE. IE did not allow reassignment, so you really did not get the jQuery object that you expected in the item variable, and therefore the append method is not available.

The easiest way to fix the code is to add var right before using the item variable. I compiled jsFiddle showing how it fixes the problem 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'); } }); 

Answer 2

I got the same error on IE11 when using the built-in document.body.append function.

You can use document.body.appendChild or insert polyfill from MDN ( https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append#Polyfill ).

Answer 3

to try:

 $.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); });