osc.js | An Open Sound Control library for JavaScript | Runtime Evironment library

Browsers handle the rendering of styling differently. TLDR is that Chrome hasn't rendered the element yet, but it has added it to the DOM. There are lots of good articles about how the render cycle works, but since this is coming from a beginners perspective, I'll leave the gory details out.

I did a couple of things, first, I moved your scripts from OSC.js into the head, so they'd be loaded the same as if the script had loaded correctly. JavaScript can hoist functions so this was probably just maintanence and explains why the code worked else where.

After that I added a debugger right before the second alert so that we could interact with the page before the alert fired.

To play along, open Chrome's developer console on this page and run the snippet. There will be screenshots if you don't want to.

You can now see and even interact with the NewDom element, in the dom, but not yet painted in a few ways.

First, just log it out: console.log(newdiv), or document.querySelector('#NewDiv').

In your console you'll see the node, right click on it and "Scroll into view", then right click on it again and "Reveal in elements panel".

You should now see something like this:

What you won't see is equally important: the dom node has no text, nor border. Even if you add a class to the page, the styles from that class will not have rendered.

Then I added a step to the script where we re-add the Element, alert, and then wait for 10 seconds.

If you're playing a long, resume your debugger now.

The script will resume, it will remove the dom node, and repeat adding it, but this time wait 10 seconds. Scroll down now, and observe the NewDiv as originally promised.