尝试在Internet Explorer(IE)上追加jQuery对象时,jQuery抛出SCRIPT5022:HierarchyRequestError

Question

我正在尝试使用jQuery插入HTML表作为div元素的子节点.我的代码看起来像这样:

var table = $('#tableId').clone();

$('#divId').append(table);

的jsfiddle

这个代码在Chrome和Firefox上运行良好,没问题,但是当我在Internet Explorer(IE)10上测试时,IE控制台会抛出这样的错误:

SCRIPT5022:HierarchyRequestError

我的互联网搜索指向我这个MSDN文档:

http://msdn.microsoft.com/en-us/library/ie/gg592979(v=vs.85).aspx

它指定错误消息:无法在请求的位置插入节点.但为什么 ？

我试过prepend(),同样的错误.出于某种原因,我无法使用table.appendTo().appendTo不适用于所有3个浏览器.

如果有人可以给我一些线索如何解决这个问题,我将不胜感激.谢谢.

更新:你可以在这个jsFiddle中看到效果:http://jsfiddle.net/phamductri/LSaDA/.尝试Chrome和Firefox,它会工作,然后尝试IE.

更新:将jQuery版本更改为1.11.0或2.1.0将使代码工作.但是如果尝试将表附加到新窗口中的div元素中,则通过引用window.opener.table:$('#divId').append(window.opener.table); 这在IE中不起作用,尽管它适用于Firefox和Chrome.

更新:我发现当我完全跳过jQuery并使用内置的JavaScript函数时,也会发生这种情况.我在这里提出另一个问题:Internet Explorer在尝试从另一个窗口追加一个HTML对象时抛出SCRIPT5022:HierarchyRequestError

Answer 1

这似乎是一个Internet Explorer安全功能,您无法在Internet Explorer中将DOM节点或jQuery对象从一个窗口附加到另一个窗口,即使那些符合相同原始条件的情况以及在其他浏览器中工作的情况 - 节点之间也无法传递打开的窗口和开启器.

如果你有一个jQuery对象,那么你可以将它转换为DOM元素并采用outerHTML如下 -

var table = $('#tableId').clone(), tableHtml = table[0].outerHTML;

或者你可以坚持使用纯JavaScript并写 -

var tableHtml = document.getElementById('tableId').outerHTML;

然后可以通过设置所需DOM元素的innerHTML将其添加到窗口文档中,如下所示 -

$('#divId')[0].innerHTML = tableHtml ;

要么

document.getElementById('divId').innerHTML = tableHtml;

要么

document.querySelector('#divId').innerHTML = tableHtml;

我还没有看到任何实际的文档说明这一点,或者给出了它背后的基本原理,但我已经看到它在其他StackOverflow问题中被引用,它肯定与我在使用Internet Explorer时看到的行为一致.

在你的链接问题中向NoGray提示.