Javascript single page application strange behavior in IE11
<p>I have a Javascript single page application with lots of code in it.</p>

<p>The main idea is that my app creates canvases and draws in them all kinds of stuff
based on all kinds of data.</p>

<p>Each canvas is within a div container. Each div container also contains a paragraph next to the canvas. </p>

<p>Everything works fine in Chrome and Firefox, but in IE 11 something strange happens:</p>

<p>The container divs are empty after they are appended to the main document.
And I have no idea why.</p>

<p>Another strange thing is that if I break the app by inserting the following code  after the section where the container divs are appended, then the canvases and the paragraphs are also appended and visible two:</p>

<pre><code>var foo = some_var; //where some_var is undefined
</code></pre>

<p>So, the code is huge, but here is a sample, just to make an idea:</p>

<p>A.js file:</p>

<pre><code>var paragraph = document.createElement("p");
var textnode = document.createTextNode("some text");
var div = document.createElement("div");
paragraph.appendChild(textnode);
div.appendChild(paragraph);
div.appendChild(canvas);

someOBJ.html = div;
</code></pre>

<p>B.js file:</p>

<pre><code>var parent2 = document.getElementById(parentId);
parent2.innerHTML = "";
parent2.style.width = '100%';

//someOBJs is an array of someOBJ from the A.js file
for(var i = 0; i &lt; someOBJs.length; i++){
        parent2.appendChild(someOBJs[i].html);
}
</code></pre>

<p>If I insert here the breaking code (using something that is undefined) that I mentioned above then the canvases and paragraphs are appended, else only the div containers (someOBJs[i].html) are appended</p>