Can I add javascript dynamically to an existing script element

Question

I want to dynamically add javascript to an existing script element something like:

var se = document.createElement('script');
se.setAttribute('type', 'text/javascript');
se.innerHTML = 'alert(1)';
document.getElementsByTagName('head').item(0).appendChild(se);

The interesting part is se.innerHTML = 'alert(1)'; and if it is valid? If not how can I do this the right way?

Answer 1

Using innerHTML if break if the text contains anything that can be interpreted as HTML such as <. It would be better to append one (or more) text nodes:

var se = document.createElement('script');
se.setAttribute('type', 'text/javascript');
se.appendChild(document.createTextNode('alert(1)'));
document.getElementsByTagName('head').item(0).appendChild(se);

Answer 2

That's not adding JavaScript to an existing script element, it's creating a new script element and adding it to the document.

This does work in modern browsers, but you wouldn't normally do it unless you had some code in a variable that you really needed to execute in global context (so you couldn't use new Function(), or eval from inside a function).

What's the use case? Do you really have to do this?

If you did try to change the script's content by writing to the text content of a <script> that was already in the document, it would not cause the new script content to be run, it would just change the contents of the DOM. The exact circumstances of what causes new script to be run when a <script> element is manipulated vary from browser to browser (though HTML5 is trying to standardise it); for now it is better to avoid doing anything other than simply creating and appending a new script. (And even better to avoid scripting <script> at all, if possible.)

Setting innerHTML will work; RoToRa's method with createTextNode is better though. For <script> in an old-school-HTML document, innerHTML will actually do the same thing as createTextNode, since <script> is a CDATA element which cannot contain markup. It would matter for XHTML-served-as-XML though, and in general it is cleaner to avoid innerHTML and its escaping problems when you just want to set plain text.

Also, you can use [0] instead of item(0) (this is defined as part of the JavaScript DOM bindings), and you should in general avoid getAttribute/setAttribute; use the DOM HTML properties like se.type=... instead, which are more readable and less buggy in IE (though the IE bugs wouldn't affect you for the type attribute).

Answer 3

All browsers currently support a javascript text property, and will evaluate the text when a new script element (without a src attribute) is added to the document.

innerHTML or adding child nodes to a script element do not evaluate the script in all browsers.

function addCode(code){
    var JS= document.createElement('script');
    JS.text= code;
    document.body.appendChild(JS);
}

//test case

var s= 'document.body.ondblclick=function(e){\n'+
'e=window.event? event.srcElement:e.target;\n'+
'alert(e.id || e.tagName);\n'+
'}\nalert("ready to double click!");';

addCode(s);