对象不支持 IE9 中的属性或方法“附加”答案

【问题标题】：Object doesn't support property or method 'append' in IE9对象不支持 IE9 中的属性或方法“附加”
【发布时间】：2013-03-14 09:48:32
【问题描述】：

此脚本在 Firefox 或 chrome 中运行，但在 IE9 中只能运行一半，IE9 是我们网站的顶级浏览器。

我遇到的问题是它抛出了这个错误。

SCRIPT438：对象不支持属性或方法“附加” calc_ajax.js，第 26 行字符 21

在这一行：item.append(link);

我坚持为什么。任何帮助，将不胜感激。

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

});

【问题讨论】：

您没有声明item 或link，所以它们是全局的，这可能会导致问题，IE 非常特殊，但不确定是否是问题所在...
有关如何执行此操作的更多信息，因为此代码不是我编写的，不幸的是，我对 js 的了解很少，很抱歉听起来像个笨蛋。
@JoeLee 写这篇文章的人应该会问这些问题
是的，但我必须修复它，但感谢 sudhir 的代码片段，现在一切正常

标签： javascript jquery internet-explorer-9

【解决方案1】：

我在 IE11 上使用原生函数 document.body.append 时遇到了同样的错误。

您可以使用document.body.appendChild 或插入polyfill from MDN (npm)。

【讨论】：

【解决方案2】：

window.item 是 Internet Explorer 中的一种特殊方法，由于您粘贴的代码没有声明局部变量 item，它试图在 IE 中重新分配本机方法。 IE 不允许重新分配发生，因此您并没有真正在 item 变量中获得您期望的 jQuery 对象，因此 append 方法不可用。

修复代码的最简单方法是在使用item 变量之前添加var。我拼凑了一个 jsFiddle，展示了它如何解决 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');
    }
});

【讨论】：

【解决方案3】：

尝试：

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

【讨论】：