Can't Append ≪Script≫ Element

Can't append script element

I've seen issues where some browsers don't respect some changes when you do them directly (by which I mean creating the HTML from text like you're trying with the script tag), but when you do them with built-in commands things go better. Try this:

var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = url;
$("#someElement").append( script );

From: JSON for jQuery

Can't append a script to head

You can use the regular .appendChild() instead:

$('head')[0].appendChild(script);

http://jsfiddle.net/PeaqH/

What this will do is access the first <head> element on the page and then use the regular DOM child append. As far as why the method you tried didn't work, I'm not sure... I have to think about it, although I suspect it has something to do with how jQuery handles adding script elements to the page.

How to append script /script in JavaScript?

Try this:

var s = document.createElement("script");
s.type = "text/javascript";
s.src = "http://somedomain.com/somescript";
$("head").append(s);

Note that the script will load and you can access the variables inside it, but you wouldn't see the actual <script> tag in the DOM.

Append script tag to head fails in Chrome

This script is blocked by AdBlocker in Chrome. If you disable it, it should work.

Maybe you could host this script on your server? Or you would need to notify your users that they have to disable their AdBlocker use everything on this site, but this probably won't make them happy.

Executing a script tag on append after the DOM has loaded

On a whim I made this change:

// document.getElementById('scriptMe').appendChild(s);
document.body.appendChild(s);

and boom, script runs and video loads.

Which is super interesting, because "why", right?

Edit:
In addition, trying other script injection methods discussed here.

document.write method

document.write(s.outerHTML) // s is a script node

also works. In fact, you can embed that script node in a div and it works as well.

createContextualFragment method

// var $container = document.getElementById('scriptMe'); // does not work
var $container = document.body
var range = document.createRange()
$container.appendChild(range.createContextualFragment(script_str))

works, where script_str is an html string literal. This will work both as "<script>....</script>" or "<div id="myDiv"><script>...</script></div>"

but all the methods I tested ultimately needed injection to be done in body.

codepen

How to append script /script to div and execute it?

ESCAPE the "/" of closing tags

<script>
    dialogFun();
            function dialogFun(){

                var code = "<div style='font-size: 12px' id='dialog'>"+
                "<script src='https://content.jwplatform.com/libraries/xyz.js'><\/script>"+
                "<div id='jwplyr'>Loading the player...</div>"+
                "<script type='text/javascript'>jwplayer('jwplyr').setup({'file': 'http://content.jwplatform.com/videos/xyz-lusPHdHK.mp4','image':'http://content.jwplatform.com/thumbs/xyz-320.jpg'});<\/script><\/div>";

                console.log(code);
                $( "body" ).append( code );
            }
</script>

Can't Append ≪Script≫ Element