Take the 2-minute tour ×

There's a div called "Content":

<div id="content"></div>

It should be filled with data from a PHP file, by AJAX, including a <script> tag. However, the script inside this tag is not being executed.

<div id="content"><!-- After AJAX loads the stuff that goes here -->
   <script type="text/javascript">
   <!-- More stuff that DOES work here -->
share|improve this question
How are you loading the div? depends on the library you use, you can normally control whether you just want to execute the scripts after the ajax load. –  Bill Yang Jan 6 '11 at 20:50
After window.onload I create a XMTHttpRequest object to request another (php) page that contains the content of the div, including a script. I'm doing this with plain JS, no libraries (other than my own lol) –  JCOC611 Jan 6 '11 at 20:52

6 Answers 6

up vote 18 down vote accepted

JavaScript inserted as DOM text will not execute. However, you can use the dynamic script pattern to accomplish your goal. The basic idea is to move the script that you want to execute into an external file and create a script tag when you get your Ajax response. You then set the src attribute of your script tag and voila, it loads and executes the external script.

This other StackOverflow post may also be helpful to you: Can scripts be inserted with innerHTML?.

share|improve this answer
Yup, I'll use this! Thanks! –  JCOC611 Jan 6 '11 at 22:20
hard to believe eval is the accepted answer to this. I thought eval was evil and to be avoided. –  Dennis Nov 17 at 22:05

I used this code, it is working fine

var arr = MyDiv.getElementsByTagName('script')
for (var n = 0; n < arr.length; n++)
    eval(arr[n].innerHTML)//run script inside div
share|improve this answer
thanks a lot, works perfect –  proximus Aug 7 '13 at 8:12
If you ask me, this is a far better answer than the accepted one. This is pretty much JavaScript injection. –  Xedret Sep 27 '13 at 19:16
I am really interested in this method, but I cant seem to get it working, I changed the top line to: var arr = document.getElementByID('myID'); –  Darksaint2014 Oct 29 at 20:12
Is there anything else I need to do or shouldn't have done –  Darksaint2014 Oct 29 at 20:12
I got it, no need for any help –  Darksaint2014 Oct 30 at 15:28

If you load a script block within your div via Ajax like this:

<div id="content">
    <script type="text/javascript">
    function myFunction() {
      //do something

... it simply updates the DOM of your page, myFunction() does not necessarily get called.

You can use an Ajax callback method such as the one in jQuery's ajax() method to define what to execute when the request finishes.

What you are doing is different from loading a page with JavaScript included in it from the get-go (which does get executed).

An example of how to used the success callback and error callback after fetching some content:

    type: 'GET',
    url: 'response.php',
    timeout: 2000,
    success: function(data) {
    error: function (XMLHttpRequest, textStatus, errorThrown) {
      alert("error retrieving content");

Another quick and dirty way is to use eval() to execute any script code that you've inserted as DOM text if you don't want to use jQuery or other library.

share|improve this answer
using the jQuery's callback, how could I "execute" the code inside the new <script>? –  JCOC611 Jan 6 '11 at 21:28
I added an example of using the success callback: –  Christopher Tokar Jan 6 '11 at 21:32
Thank you so much! the "myFunction();" part was what I was leaving out of my code. –  Jason Sep 25 '13 at 15:32

This 'just works' for me using jQuery, provided you don't try to append a subset the XHR-returned HTML to the document. (See this bug report showing the problem with jQuery.)

Here is an example showing it working:

<html lang="en"> 
    <script type="text/javascript" charset="utf-8" src="jquery.1.4.2.js"></script> 
        var snippet = "<div><span id='a'>JS did not run<\/span><script type='text/javascript'>" +
        "$('#a').html('Hooray! JS ran!');" +
    <div id="replaceable">I'm going away.</div> 

Here is the equivalent of the above: http://jsfiddle.net/2CTLH/

share|improve this answer

I had a similiar post here, addEventListener load on ajax load WITHOUT jquery

How I solved it was to insert calls to functions within my stateChange function. The page I had setup was 3 buttons that would load 3 different pages into the contentArea. Because I had to know which button was being pressed to load page 1, 2 or 3, I could easily use if/else statements to determine which page is being loaded and then which function to run. What I was trying to do was register different button listeners that would only work when the specific page was loaded because of element IDs..


if (page1 is being loaded, pageload = 1) run function registerListeners1

then the same for page 2 or 3.

share|improve this answer

Here is the script that will evaluates all script tags in the text.

function evalJSFromHtml(html) {
  var newElement = document.createElement('div');
  newElement.innerHTML = html;

  var scripts = newElement.getElementsByTagName("script");
  for (var i = 0; i < scripts.length; ++i) {
    var script = scripts[i];

Just call this function after you receive your HTML from server. Be warned: using eval can be dangerous.

Demo: http://plnkr.co/edit/LA7OPkRfAtgOhwcAnLrl?p=preview

share|improve this answer

Your Answer


