javascript - jQuery 抛出 SCRIPT5022 : HierarchyRequestError when attempted to append a jQuery object on Internet Explorer ( IE)

Question

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

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

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

jsFiddle

此代码在 Chrome 和 Firefox 上运行良好，没问题，但是当我在 Internet Explorer ( IE ) 10 上测试时，IE 控制台抛出如下错误:

SCRIPT5022:层次结构请求错误

我的 Internet 搜索指向这个 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 将使代码工作。但是，如果试图通过引用后面的 window.opener.table 将表格附加到新窗口中的 div 元素中: $('#divId').append(window.opener.table);这在 IE 中不起作用，但它在 Firefox 和 Chrome 中有效。

更新:我发现当我完全跳过 jQuery 并使用内置 JavaScript 函数时也会发生这种行为。我在这里提出另一个问题:Internet Explorer throws SCRIPT5022: HierarchyRequestError when trying to appendChild an HTML object from another window

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 致敬。