IE DOM Error Message / Operation Aborted
Tags: append, dom, ie, insert, operation-aborted
It is possible in IE for DOM manipulation during load to cause an error that looks like the following
IE "Internet Explorer cannot open the Internet site" ... "Operation aborted"
This error is directly cause by script called with in an element that attempts to append/insert DOM nodes to its unclosed parent’s parent node. For example the following code will work fine in FireFox and Opera, but not in IE.
<html> <head> <title>Test</title> </head> <body> <div id="div0" style="width:150px;border:1px solid black;margin:25px;">Test Div 0</div> <div id="div1" style="width:200px;border:1px solid red"> Test Div 1 <div> <script type="text/javascript"> var div0 = document.getElementById( "div0" ); var div1 = document.getElementById( "div1" ); var aDiv = document.createElement( "DIV" ); aDiv.appendChild( document.createTextNode( "aDiv" ) ); div1.appendChild( aDiv ); </script> </div> <div id="div2" style="border:1px solid green">Test Div 2</div> </div> </body> </html>
If the div in the example above that cotains the script block is removed, the code will run just fine in IE.
<html> <head> <title>Test</title> </head> <body> <div id="div0" style="width:150px;border:1px solid black;margin:25px;">Test Div 0</div> <div id="div1" style="width:200px;border:1px solid red"> Test Div 1 <script type="text/javascript"> var div0 = document.getElementById( "div0" ); var div1 = document.getElementById( "div1" ); var aDiv = document.createElement( "DIV" ); aDiv.appendChild( document.createTextNode( "aDiv" ) ); div1.appendChild( aDiv ); </script> <div id="div2" style="border:1px solid green">Test Div 2</div> </div> </body> </html>
This is known behaviour and is to be expected. It just is one of those bugs that frustrates new JavaScript developers.
The solution is quite simple and it is either to put the script block on the first child level, run post load (load or DOM content load), or to put the script block after the close of the appended to item.
