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 :

(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 : / . 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

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./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/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

• javascript
• jquery
• html
• internet-explorer

• Can you post a demo to reproduce the issue? Try jsfiddle – elclanrs Commented Apr 14, 2014 at 23:12
• I just updated, thanks. – phamductri Commented Apr 14, 2014 at 23:58
• Id's must be unique, try using a class. – elclanrs Commented Apr 15, 2014 at 0:06
• 2 IE doesn't allow appending cross-window elements, i.e. if you create an element in a pop-up, you can't append it to the opener's document. Always create elements to append in the same document they're going to be appended. This feature seems not be documented at MSDN though. – Teemu Commented Apr 16, 2014 at 4:20
• 1 @phamductri Depends on how you have deep copied the element. jQuery might still create elements to document behind the scenes. You could try to "append" #tableId.outerHTML using insertAdjacentHTML. That should work in any browser, though it's not very elegant way. – Teemu Commented Apr 16, 2014 at 19:17

1 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.