How to append <script></script> in JavaScript?
393,684
Solution 1
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.
Solution 2
// Create the element
var script = document.createElement("script");
// Add script content
script.innerHTML = "...";
// Append
document.head.appendChild(script);
Or
document.body.appendChild(script);
Solution 3
$('<script>alert("hi");</' + 'script>').appendTo(document.body);
DEMO
Solution 4
If you need to append a script so that it's parsed you could do as google does for his +1 button
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'link to your script here';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
Solution 5
This worked for me..
<script>
$('head').append("<script>your script content here<\/script>");
</script>
Note that the "/" of the inner </script>
has been escaped to be "<\/script>"
. If it is not, it actually closes the outer <script>
tag.
The script added wont be visible but will get executed. Hope that helps.
Author by
David
Updated on July 08, 2022Comments
-
David almost 2 years
I need to use
appendChild()
or jQuey'sappend()
to append some<script>
tag stuff into the document. From what I can tell, this is getting stripped out. Anyone know how to do it?-
Thomas Clayson over 12 yearsthe second answer on that question with a vote of 67 is a very good answer which will tell you everything you need to know.
-
Black about 6 yearssimply write
<script><\/script>
instead of<script></script>
-
-
Boyan over 9 yearsCool but how does this work? I've known this fix for about a year and still have no clue whatsoever.
-
qwertymk over 9 yearsThe only reason you can't do
$('<script></script>')
is because the string</script>
isn't allowed inside javascript because the DOM layer can't parse what's js and what's html. You can even do$('<script><\/script>')
to get around that limitation -
James about 8 yearsInspect element and you'll see
-
ThisLeeNoble about 8 yearsThis method generates a warning that loading scripts synchronously is detrimental to user experience. Assuming you're going to want to be calling something in that javascript you're loading, it should be loaded asynchronously and a callback method employed to run your code which is dependant on the new script. stackoverflow.com/questions/7718935/…
-
Chef_Code almost 8 yearsnicely done... where should you place this function call? does it matter?
head
body
-
Vishal Kumar Sahu over 7 yearsno it should be in the dom only... Just that...
-
Michael Rogers over 4 yearsYou can set async to true.
-
topsoftwarepro almost 4 yearsI tried every other way with my script, but this is the only way that worked! Thank you very much!
-
Timo over 3 years
s.type
is not needed, theshorter
thebetter
. -
tanguy_k about 3 yearsThis code will crash (s is undefined) if you don't have any script tag in your HTML (example:
<!DOCTYPE html><title>Hello, World!</title>
- this is valid HTML) -
TawabG over 2 yearsI tried to append a js widget (with html and a script tag) to a div. This solution worked perfectly! Thank you!
-
Protector one over 2 years@Timo
type
is required for generating valid HTML if you use an XHTML doctype. -
Timo over 2 years@Protectorone I do not quite agree, the default is
text/javascript
, check here