Loading script tags via AJAX

Question

I have a div tag which is filled with script via an ajax call, but the script does not execute.

Is there a way to cause the script to execute?

Answer 1

If you set innerHtml of div, the script tags should execute. I am using $("#divid").load() to load dynamic contents and script tags do execute.

Try using JQuery if it does not work out using plain javascript.

Answer 2

I guess, you are writing script tag into innerHTML directly

This will not work.

document.body.innerHTML+="<script>alert(1)</scr"+"ipt>"; 

you have to write using DOM functions like this

var tag = document.createElement("script");
tag.innerHTML="alert(1)";
document.body.appendChild(tag); //can be append to any object other than body

or Better use jQuery

Answer 3

If you use jQuery's .html method it parses out the script tag and evals it:

$("div").html('<script type="text/javascript">alert("This should work")</script>');

If jQuery isn't an option you could write this yourself using either (1) a regular expression, or (2) parse out the DOM tree and find script tags. (#2 is how jQuery does it)

Answer 4

It is always a good idea to separate content from code. Load content via AJAX and code by inserting <script> tags. If you are using jQuery, use $.getScript() to load scripts dynamically.