Dynamically adding script element to a div does not execute the script
<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="http://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>
