I need to use appendChild() or jQuey's append() 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?
6 Answers
// Create the element
var script = document.createElement("script");
// Add script content
script.innerHTML = "...";
// Append
document.head.appendChild(script);
Or
document.body.appendChild(script);
Comments
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.
6 Comments
Nhu Trinh
Inspect element and you'll see
ThisLeeNoble
This 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/…
Timo
s.type is not needed, the shorter the better.
Protector one
@Timo
type is required for generating valid HTML if you use an XHTML doctype.
PDA
@Timo is right you don't need to define defaults similar input default is type="text", with that said if you have other scripts in document.head that are not of type javascript than good to include to differentiate, but chances are you are not, your script tag always javascript, therefore redundant to be explicit
|
$('<script>alert("hi");</' + 'script>').appendTo(document.body);
DEMO
2 Comments
Boyan
Cool but how does this work? I've known this fix for about a year and still have no clue whatsoever.
qwertymk
The 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 limitationIf 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);
})();
answered Feb 23, 2012 at 13:13
Nicola Peluchetti
76.9k32 gold badges150 silver badges197 bronze badges
3 Comments
Chef_Code
nicely done... where should you place this function call? does it matter?
head body
Vishal Kumar Sahu
no it should be in the dom only... Just that...
tanguy_k
This 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)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.
2 Comments
topsoftwarepro
I tried every other way with my script, but this is the only way that worked! Thank you very much!
TawabG
I tried to append a js widget (with html and a script tag) to a div. This solution worked perfectly! Thank you!
$('your_document_selector').text('<script></script>')
.text() makes it possible to append script tags with it being rendered as HTML.
OR
$('your_document_selector').append('<script></script>')
<script><\/script>instead of<script></script>