How to append in JavaScript?

Question

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?

the second answer on that question with a vote of 67 is a very good answer which will tell you everything you need to know. — Thomas Clayson, Feb 23 '12 at 13:13

score 305 · Answer 1 · edited Jun 19 '13 at 01:37

305

// Create the element

var script = document.createElement("script");

// Add script content

script.innerHTML = "...";

// Append

document.head.appendChild(script);

Or

document.body.appendChild(script);

edited Jun 19 '13 at 01:37

gaby de wilde

1,313
12
6

answered Feb 23 '12 at 13:14

Dennis

14,264
2
48
57

score 173 · Accepted Answer · answered Feb 23 '12 at 13:13

173

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.

answered Feb 23 '12 at 13:13

Sapan Diwakar

10,480
6
33
43

11

Inspect element and you'll see – James Apr 02 '16 at 23:10
7

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. http://stackoverflow.com/questions/7718935/load-scripts-asynchronously#7719185 – ThisLeeNoble May 24 '16 at 13:45
You can set async to true. – Michael Rogers Dec 26 '19 at 01:54
1

`s.type` is not needed, the `shorter` the `better`. – Timo Mar 15 '21 at 09:07
1

@Timo `type` is required for generating valid HTML if you use an XHTML doctype. – Protector one Jan 03 '22 at 13:08
1

@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 – PDA Jan 28 '23 at 01:34

score 56 · Answer 3 · answered Feb 23 '12 at 13:11

56

$('<script>alert("hi");</' + 'script>').appendTo(document.body);

DEMO

answered Feb 23 '12 at 13:11

qwertymk

34,200
28
121
184

Cool but how does this work? I've known this fix for about a year and still have no clue whatsoever. – Boyan Nov 23 '14 at 21:35
22

The only reason you can't do `$('')` is because the string `` isn't allowed inside javascript because the DOM layer can't parse what's js and what's html. You can even do `$(' – qwertymk Nov 23 '14 at 22:55

score 38 · Answer 4 · edited Feb 28 '20 at 21:32

38

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);
  })();

edited Feb 28 '20 at 21:32

Aamir Afridi

6,364
3
42
42

answered Feb 23 '12 at 13:13

Nicola Peluchetti

76,206
31
145
192

nicely done... where should you place this function call? does it matter? `head` `body` – Chef_Code Aug 17 '16 at 19:11
no it should be in the dom only... Just that... – Vishal Kumar Sahu Mar 09 '17 at 08:46
1

This code will crash (s is undefined) if you don't have any script tag in your HTML (example: ` Hello, World!` - this is valid HTML) – tanguy_k May 26 '21 at 10:56

score 30 · Answer 5 · edited Feb 28 '14 at 09:20

30

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.

edited Feb 28 '14 at 09:20

DAC84

1,254
1
20
30

answered Feb 28 '14 at 09:00

Suganya

574
6
9

I tried every other way with my script, but this is the only way that worked! Thank you very much! – topsoftwarepro Jul 07 '20 at 12:09
I tried to append a js widget (with html and a script tag) to a div. This solution worked perfectly! Thank you! – TawabG Dec 30 '21 at 00:16

score 2 · Answer 6 · answered Feb 23 '12 at 13:11

2

$('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('&lt;script&gt;&lt;/script&gt;')

answered Feb 23 '12 at 13:11

linuxeasy

6,269
7
33
40

How to append in JavaScript?

6 Answers6

DEMO

Linked

Related