Question

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):

e was retrieved via .getElementById("overlayidentifier") 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.

Before I dive into the abyss of the script that originally creates and works with overlayidentifier, I just wanted to know.. what’s going on here.

Any .style changes to e have effect – nothing happens if overlayidentifier.style.~ is modified, though.

Where do I begin?

Demystified. For the more curious:

The problem was a lonely .innerHTML +=-esque piece of code somewhere on the page. Using .innerHTML 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 .innerHTML 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 .parentNode returning null.

This was a fun waste of time, actually.

Answer 1

You have two elements with the id of overlayidentifier, as is evidenced by the little “>” arrow and the ... that says your div has content when you type overlayidentifier that are not there when you type e

To clarify, since one of your nodes has the “>” and the other doesn’t, you have two different nodes.