In the process of replacing jQuery with Umbrella JS as my DOM (Document Object Model) abstraction layer, I ran into a small quirky behavior. It seems that if I created a
To this in action, let's generate two
<script> tags, one using either approach, append them to the
As you can see, we're using the following two Umbrella JS constructor invocations to build up script tags:
u( "<script>" )
u( document.createElement( "script" ) )
... then we're setting the
textContent values and appending them to the DOM. And, when we execute this code, we get the following browser output:
As you can see, both
<script> tags were created and injected into the DOM. However, the one created as an HTML snippet appears to be inert. Only the one created using
To be clear, this has nothing to do with the fact that I'm setting the
textContent property (via
.text()) - the same inert behavior would be observed if I were setting the
A few years ago, I ran into a similar problem with jQuery as well. In that post, jQuery wouldn't execute Script tags created with a
<script> HTML snippet. So, my guess is that this is not a jQuery / Umbrella JS issue but rather a low-level DOM issue.
But hey, at least there's a really easy work-around using native DOM node creation.
Want to use code from this post? Check out the license.