jQuery throws SCRIPT5022: HierarchyRequestError when attempted to append a jQuery object on Internet Explorer ( IE)

Question

I'm trying to use jQuery to insert an HTML table as a child node of a div element. My code looks something like this :

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

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

jsFiddle

This code works fine on Chrome and Firefox, no issue, yet when I tested on Internet Explorer ( IE ) 10, the IE console throws an error like this:

SCRIPT5022: HierarchyRequestError

My internet search points me to this MSDN document :

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

It specifies that for the error message : The node cannot be inserted at the requested location. But why ?

I have tried prepend(), same error. For some reason I can't use table.appendTo(). appendTo doesn't work on all 3 browsers.

I would appreciate if someone can points me some clues how to get around this. Thanks.

Update: you can see the effect in this jsFiddle : http://jsfiddle.net/phamductri/LSaDA/ . Try Chrome and Firefox, it will work, then try IE.

Update: change the jQuery version to 1.11.0 or 2.1.0 will make the code work. But if trying to append the table into a div element in the new window, by referencing back window.opener.table : $('#divId').append(window.opener.table); This will not work in IE, though it works in Firefox and Chrome.

Update: I have discovered that this behavior is also happening when I skipped jQuery altogether and using built-in JavaScript functions. I have make another question here : Internet Explorer throws SCRIPT5022: HierarchyRequestError when trying to appendChild an HTML object from another window

Answer 1

This seems to be an Internet Explorer security feature, you cannot append a DOM node or jQuery object from one window to another in Internet Explorer, even those meeting same origin criteria and in situations where it works in other browsers - nodes simply cannot be passed between the opened window and the opener.

If you have a jQuery object then you can convert it to a DOM element and take the outerHTML as follows-

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

Alternatively you could stick to plain JavaScript and write-

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

This can then be added into the window document by setting the innerHTML of the desired DOM element as follows-

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

or

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

or

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

I have yet to see any actual documentation stating this, or giving the rationale behind it, but I have seen it cited in other StackOverflow questions and it is certainly consistent with behaviour I have seen when working with Internet Explorer.

Hat tip to NoGray in your linked question.