JavaScript: same element retrieved by getElementById, but .. is different?
<p>I really hope I'm missing something obvious here. Here's a screenshot of Chrome's console, dead in front of me (well, other tab):</p>

<p><img src="http://i.stack.imgur.com/9mK27.png" alt="What's the difference between one element and the other?"></p>

<p><code>e</code> was retrieved via <code>.getElementById("overlayidentifier")</code> by me, from the console. The other variable is used by a rather messy script included on a site I happen to be working with.</p>

<p>Before I dive into the abyss of the script that originally creates and works with <code>overlayidentifier</code>, I just wanted to know.. what's going on here.</p>

<p>Any <code>.style</code> changes to <code>e</code> have effect - nothing happens if <code>overlayidentifier.style.~</code> is modified, though.</p>

<p>Where do I begin?</p>

<p><strong>Demystified. For the more curious:</strong></p>

<p>The problem was a lonely <code>.innerHTML +=</code>-esque piece of code somewhere on the page. Using <code>.innerHTML</code> causes a rebuild of the DOM structure inside the element on which it is called. So any references of elements inside, obtained prior to the <code>.innerHTML</code> assignment will get invalidated in a confusing way: they retain most of their the attributes can be interacted with normally, but they are no longer in the DOM tree. Which is evidenced by <code>.parentNode</code> returning <code>null</code>. </p>

<p>This was a fun waste of time, actually.</p>
