當試圖在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將使代碼工作。但是，如果試圖通過引用後面的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。