Javascript 未捕获类型错误：无法读取属性'；所有者文档'；未定义的

我正在自学AJAX，使我的网站成为AJAXify。在我的模板中，我使用以下JS代码从视图中获取一些JSON数据，然后将数据附加到div中

function filter(type) {
  $.getJSON(
    '/activity_stream/global-activity-stream/', 
    {xhr: "true", filter: type}, 
    function(data) {
      $('.mainContent').children().remove();
      $(data).appendTo('.mainContent');
    });
  }

  $(".btn").click(function () { 
    filter("recent"); 
  });
}

我认为我的视图返回了正确的JSON，但现在数据没有添加到

.mainContent

div

它给出了以下错误：

未捕获的TypeError:无法读取未定义的属性“ownerDocument”

---

确保向jQuery传递的是选择器，而不是某种形式的数据：

$( '.my-selector' )

不是：

我也有类似的问题。

---

我在使用jQuery.map，但最后忘了使用jQuery.map（…）.get（）来处理普通数组。

在

$elms.each（）中我也遇到了同样的问题

因为：

传递给
的函数。每个（函数）
公开（至少）两个参数；第一个是索引，第二个是列表中当前元素中的元素，以及
因为其他类似的循环方法在索引之前给出数组中的当前元素
您可能很想这样做：

$elms.each((item) => $(item).addClass('wrong'));

当这是您所需要的：

$elms.each((index, item) => $(item).addClass('wrong'));

如果要附加到DOM，请确保内容兼容：

modal.find ('div.modal-body').append (content) // check content

如果使用ES6 anon函数，它将与
$（此）

这项工作：

$('.dna-list').on('click', '.card', function(e) {
  console.log($(this));
});

这不起作用：

$('.dna-list').on('click', '.card', (e) => {
  console.log($(this));
});

在我的例子中，发生这个错误是因为我的HTML后面有一个换行符

var myHtml = '<p>\
    This should work.\
    But does not.\
</p>\
';

jQuery('.something').append(myHtml); // this causes the error

如果要恢复JSON，那么仅仅将其附加到DOM中是行不通的。你期望发生什么？我想我期望它将数据加载到div中…我如何实现这一点？我对这个AJAXy的东西不熟悉…只需更改
$（'.mainContent'）.children（）.remove（）$（数据）。附录（“.mainContent”）
到
$（'.mainContent'）.html（数据）
问题是，当您执行
appendTo
时，jquery希望
$（数据）
是一个dom节点，在这种情况下，它很可能不是dom节点。谢谢，这有助于解决该错误，尽管现在返回的JSON数据没有显示在div:-（@karthikr，它只是将原始JSON转储到页面上，但是是
$（'.mainContent'）.html（数据）；
应显示来自服务器的任何内容（仅作为原始JSON文本）。（执行此操作之前无需删除子项。）您可以使用浏览器调试工具来检查并查看服务器返回的内容。这对我来说非常正确。我原以为问题出在jQuery函数上，但实际上我是一个数组，而不是通常的单个对象。谢谢。这应该是公认的答案。
var myHtml = '<p>\
    This should work.\
    But does not.\
</p>\
';

jQuery('.something').append(myHtml); // this causes the error

jQuery('.something').append(jQuery.trim(myHtml)); // this works