Can scripts be inserted with innerHTML?

javascript html dom innerhtml
Craig picture Craig · Jul 29, 2009 · Viewed 208.1k times · Source

I tried to load some scripts into a page using innerHTML on a <div>. It appears that the script loads into the DOM, but it is never executed (at least in Firefox and Chrome). Is there a way to have scripts execute when inserting them with innerHTML?

Sample code:

Answer

zombat picture zombat · Jul 29, 2009

You have to use eval() to execute any script code that you've inserted as DOM text.

MooTools will do this for you automatically, and I'm sure jQuery would as well (depending on the version. jQuery version 1.6+ uses eval). This saves a lot of hassle of parsing out <script> tags and escaping your content, as well as a bunch of other "gotchas".

Generally if you're going to eval() it yourself, you want to create/send the script code without any HTML markup such as <script>, as these will not eval() properly.

Related questions

JQuery html() vs. innerHTML

Can I completely rely upon jQuery's html() method behaving identical to innerHTML? Is there any difference between innerHTML and jQuery's html() method? If these methods both do the same, can I use jQuery's html() method in place of innerHTML? My …

Read More
javascript document.innerHTML set content of whole document

How can I set the innerHTML, or the whole content of an HTML document using javascript? For example my document would look like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/…

Read More
How can I change an element's class with JavaScript?

How can I change the class of an HTML element in response to an onclick or any other events using JavaScript?

Read More