2

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

Community
  • 1
  • 1
phamductri
  • 1,351
  • 2
  • 14
  • 18
  • Can you post a demo to reproduce the issue? Try http://jsfiddle.net – elclanrs Apr 14 '14 at 23:12
  • I just updated, thanks. – phamductri Apr 14 '14 at 23:58
  • Id's must be unique, try using a class. – elclanrs Apr 15 '14 at 00:06
  • yes, the id for table and div are unique. In my example it looks generics, but you can assume that the ids are unique. – phamductri Apr 15 '14 at 00:09
  • But the table is not unique, since you're cloning it, you now have two elements with the same id. – elclanrs Apr 15 '14 at 00:11
  • sorry for the confusion, if I tried to append within the same window, yes, it's not unique. In my real code, I actually try to append it in another window by using reference like this var table = window.opener.copyTable. This table will be unique in the new window, so is the div id. I put the div and the table in the same window because of jsFiddle limitation. Thanks – phamductri Apr 15 '14 at 00:19
  • For some reason jQuery 2.0 doesn't work for IE at jsFiddle. Using 1.11.0 [your code works](http://jsfiddle.net/zX6K2/) as it is also in IE (added new `id` though). – Teemu Apr 15 '14 at 08:48
  • @Teemu : it works with 1.11.0 and 2.1.0, but when I try to append to a div in another window, by referencing back window.opener.table : $('#divId').append(window.opener.table); it doesn't work (only on IE though), you have any ideas ? – phamductri Apr 15 '14 at 22:44
  • 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 Apr 16 '14 at 04:20
  • @Teemu: I did try to deep-copy the element before appending it, but this doesn't work either. What's wrong with the deep-copy approach ? Isn't that the equivalent to creating new elements ? – phamductri Apr 16 '14 at 18:51
  • 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`](https://developer.mozilla.org/en-US/docs/Web/API/Element.insertAdjacentHTML). That should work in any browser, though it's not very elegant way. – Teemu Apr 16 '14 at 19:17

1 Answers1

8

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.

pwdst
  • 13,909
  • 3
  • 34
  • 50