title: Dynamically adding script element to a div does not execute the script
body: <p>I am trying to add a script block dynamically to the document. When I do this, the script block is not getting executed.</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="dynamicDiv"&gt;
      &lt;/div&gt;
  
      &lt;script type="text/javascript"&gt;
          var elem = document.getElementById("dynamicDiv");
          var tmpStr = "&lt;script type=\"text\/javascript\"&gt; ";
          tmpStr += "function hello (val)";
          tmpStr += "{";
          tmpStr += "alert('hello ' + val);";
          tmpStr += "}";
          tmpStr += "&lt;\/script&gt;";
  
          elem.innerHTML = tmpStr;
  
          hello("World");
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The above code does not work. From another post (<a href="https://stackoverflow.com/questions/75943/how-do-you-execute-a-dynamically-loaded-javascript-block">How do you execute a dynamically loaded JavaScript block?</a>), I saw a reply that if script is added to innerHTML, it will not be executed. Instead of directly using innerHTML, create a div with this innerHTML and use appendChild to add the script. </p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="dynamicDiv"&gt;
      &lt;/div&gt;
  
      &lt;script type="text/javascript"&gt;
          var elem = document.getElementById("dynamicDiv");
          var tmpStr = "&lt;script type=\"text\/javascript\"&gt; ";
          tmpStr += "function hello (val)";
          tmpStr += "{";
          tmpStr += "alert('hello ' + val);";
          tmpStr += "}";
          tmpStr += "&lt;\/script&gt;";
  
          var newdiv = document.createElement('div');
          newdiv.innerHTML = tmpStr;
  
          elem.appendChild(newdiv);
  
          hello("World");
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>How ever, this solution also did not work for me.</p>
  
  <p>In another reply, I again saw that we should get the script elements and execute them using eval.</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="dynamicDiv"&gt;
      &lt;/div&gt;
  
      &lt;script type="text/javascript"&gt;
          var elem = document.getElementById("dynamicDiv");
          var tmpStr = "&lt;script type=\"text\/javascript\"&gt; ";
          tmpStr += "function hello (val)";
          tmpStr += "{";
          tmpStr += "alert('hello ' + val);";
          tmpStr += "}";
          tmpStr += "&lt;\/script&gt;";
  
          var newdiv = document.createElement('div');
          newdiv.innerHTML = tmpStr;
  
          elem.appendChild(newdiv);
  
          var scripts = newdiv.getElementsByTagName('script');
          for (var ix = 0; ix &lt; scripts.length; ix++) {
              eval(scripts[ix].text);
          }
  
          hello("World");
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>This solution works for me.</p>
  
  <p>But if do this in a function then it does not work.</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="dynamicDiv"&gt;
      &lt;/div&gt;
  
      &lt;script type="text/javascript"&gt;
  
          function createFunction(){
              var elem = document.getElementById("dynamicDiv");
              var tmpStr = "&lt;script type=\"text\/javascript\"&gt; ";
              tmpStr += "function hello (val)";
              tmpStr += "{";
              tmpStr += "alert('hello ' + val);";
              tmpStr += "}";
              tmpStr += "&lt;\/script&gt;";
  
              var newdiv = document.createElement('div');
              newdiv.innerHTML = tmpStr;
  
              elem.appendChild(newdiv);
  
              var scripts = newdiv.getElementsByTagName('script');
              for (var ix = 0; ix &lt; scripts.length; ix++) {
                  eval(scripts[ix].text);
              }   
              hello("World 1");
          }
  
          createFunction();
          hello("World 2");
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I can see that the function is available after the script is evaled. and is available in the function createFunction. Outside createFunction() scope, hello() is not available.</p>
  
  <p>What am I doing wrong? Am I missing something very basic? Please check and help.</p>
  
  <p>Thanks,
  Paul</p>
  
  <p>P.S. I don't use jQuery.
  I am using chrome to test this.</p>