What's the better practice: eval or append script?

Question

I need to execute a custom piece of JavaScript I got from some AJAX call. I could do an eval of the string or I could just append it in a script-tag to the DOM. Which method would be better?

var dynamicScript = 'alert(\'Hello world!\');';

Method 1 - Script:

var x = '<script type="text/javascript">' + dynamicScript  +'</scr' + 'ipt>';
$(document.body).append(x);

Method 2 - Eval:

eval(dynamicScript);

What method is better and why? Or is there an ever better alternative?

Answer 1

I prefer eval, because it's generally faster than creating a script tag, and appending it (especially if you wanted to create and insert it using jQuery).

Side note (useful application of a script tag) I also use the script-tag-insertion method: In Google Chrome's extensions, injecting script-tags is the only way to run code in the scope of a page, because the window object is sandboxed.

PS. Notion of jQuery.getScript(). This method might be useful.

Answer 2

Neither method is really that good for what you're doing. Your AJAX call should be returning data not serialized scripts. Both of your methods open you up to script injection.

eval should be avioded at all costs. It's slow and dangerous, eval is evil

Answer 3

If the ajax call is returning html with script tags, you can use $.load() to import the script.

http://api.jquery.com/load/

Answer 4

Add it to the DOM. Reasons (taken from http://ajaxpatterns.org/On-Demand_Javascript ):

The JavaScript will automatically be evaluated in much the same way as JavaScript linked in the static HTML is evaluated when the tag is first encountered. You can declare a bare function or variable without adding it to the window.

You can load JavaScript from external domains.

The URL points to a specific Javascript resource. With XMLHttpRequest, there's more flexibility: you can, for example, send several JavaScript snippets inside different XML nodes.

The DOM is affected in a different way. Even if the behaviour is transient, the script will be added to the DOM, whereas it would disappear after an XMLHttpRequest callback eval'd it.