does innerHTML not evaluate javascript?

Question

I'm trying out a technique where I break my code up into individual files (so that a page that might have a bunch of different pieces is now multiple files rather than one humongous HTML page) and use ajax to load them and then set the contents as innerHTML to some parent div. This makes for very clean code and works nicely in seemingly all modern browsers, but I just noticed that when the external page contains a <script> tag, the javascript that's in that tag is just ignored (not parsed and loaded into the parent page's javascript context) so the methods and variables that exist in these external snippets are simply missing.

I have kludged a work around where I read the script tag's contents in and then eval() the whole thing, and that works... however, I'm curious if I'm overlooking some more native mechanism for including the script in these external files, or if this approach is really the only one there is to achieve my goals.

TIA

Is the script tag not present in the DOM, or does the code in it not execute? — Waleed Khan
– Waleed Khan, Commented Dec 30, 2012 at 8:03
@JanDvorak "Added 2 characters in body." What about the eval()? This seems a bit pedantic. — Waleed Khan
– Waleed Khan, Commented Dec 30, 2012 at 8:06
@WaleedKhan, the ~<script>~ tag is present in my external snippets. So, the code that's read in via AJAX is valid HTML (including valid javascript). The whole thing is retrieved in the ajax request and then loaded via innerHTML into an encasing DIV. However, the javascript isn't evaluated at the time of being set in the innerHTML (or ever). So, as I said, I'm manually parsing that chunk out of the incoming text and eval()ing it but that seems ugly to me. — Yevgeny Simkin
– Yevgeny Simkin, Commented Dec 30, 2012 at 8:12

Potatoswatter · Accepted Answer · 2012-12-30 08:16:28Z

2

This isn't a job for innerHTML. You should probably load the external file as a DOM object (which is the origin of the XMLHTTPRequest name) so the script tag is turned into the proper object before getting added.

A quick experiment with Firefox using jQuery (on this page, heh) shows that innerHTML will add a script element that doesn't get executed, whereas this does execute:

$( 'body' ).append( $('<script>console.log( "hello, world!" );</script>' ) );

edited Dec 30, 2012 at 8:16

answered Dec 30, 2012 at 8:09

Potatoswatter

139k29 gold badges281 silver badges435 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Yevgeny Simkin Over a year ago

interesting... so... I'm quite familiar with XMLHTTPRequest, but in this instance was using jQuery.get() to achieve the same result. Should I switch back to straight javascript for this or is there a jQuery analog that I can leverage?

Potatoswatter Over a year ago

@Dr.Dredel Just specify 'XML' as the last argument to jQuery.get().

Yevgeny Simkin Over a year ago

ah.. I think we were typing at the same time. So you're saying I should use append instead of innerHTML?

Potatoswatter Over a year ago

@Dr.Dredel Use whatever you want… innerHTML is DOM, not a jQuery API so I assumed you weren't using jQ. To get the same semantics, you could use $.replaceAll.

Collectives™ on Stack Overflow

does innerHTML not evaluate javascript?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related