javascript - Internet Explorer throws SCRIPT5022: HierarchyRequestError when trying to appendChild an HTML object from another window

Question

I have an html table from one window. I get the table by using

var table = document.getElementById('tableId');

then I open another window by using :

window.open('newWindow.html'); 

In this window, there's a div with id = divId.

Now if I tried to append the table from the other window by the following code :

var cloneTable = jQuery.extend(true, {}, window.opener.table);

var div = document.getElementById('divId');

div.appendChild(cloneTable);

Internet Explorer will throw this error :

SCRIPT5022: HierarchyRequestError

I have searched into the error code, listed here :

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

It said I can't insert the node at that location. However, the above code works fine in Firefox and Chrome.

What's happened here and how I can work around it ?

Thanks,

P.S: I'm using IE 10

Answer 1

IE is probably can't move elements across different documents. What you can do is to user the outerHTML property if the browser fails to clone the table.

e.g.

var tbl = window.opener.table;
try {
    document.getElementById('my_div').appendChild(tbl.cloneNode(true)); 
}
catch (e){
    if (tbl.outerHTML) {
        document.getElementById('my_div').innerHTML = tbl.outerHTML;
    }
    else {
            console.log('not working');
    }
}