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

html, internet-explorer, javascript, jquery

Solution

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');
    }
}

Problem

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

Original source