Best IT Recipes

How to dynamically insert <script> tag through jQuery after page loading?

I have problems with work. First I tried to set the script tags as strings, and then using jquery replaceWith () add them to the document after the page loads:

var a = '<script type="text/javascript">some script here</script>'; $('#someelement').replaceWith(a);

But I got string literals on this var. Then I tried to encode the string as:

 var a = '&left;script type="text/javascript"&gt;some script here&lt;\/script&gt;';

but sending this value to replaceWith() only outputs this line to the browser.

Can someone please tell me how would you dynamically add the <script> to the browser after the page loads, ideally via jQuery?

+78
javascript jquery script-tag javascript-injection
04 Oct 2018-10-10
source share
9 answers

You can put the script file in a separate file, and then $.getScript use it to load and run.

Example:

 $.getScript("test.js", function(){ alert("Running test.js"); });
+82
04 Oct 2018-10-18
source share
— -

Try the following:

 <script type="text/javascript"> // Use any event to append the code $(document).ready(function() { var s = document.createElement("script"); s.type = "text/javascript"; s.src = "http://scriptlocation/das.js"; // Use any selector $("head").append(s); });

http://api.jquery.com/append

+55
04 Oct '10 at 18:23
source share

Here's the right way to do this using modern (2014) jQuery:

 $(function () { $('<script>') .attr('type', 'text/javascript') .text('some script here') .appendTo('head'); })

or if you really want to replace the div you could do:

 $(function () { $('<script>') .attr('type', 'text/javascript') .text('some script here') .replaceAll('#someelement'); });
+25
Nov 23 '14 at 21:43
source share

The simplest way:

 $('head').append('<script type="text/javascript" src="your.js"></script>');

You can also use this form to download css.

+8
Feb 20 '15 at 9:59
source share

This answer is technically similar or equal to what jcoffland answered. I just added a query to determine if the script is present or not. I need this because I work on an intranet website with several modules, some of which use scripts or bring their own, but these scripts do not need to be downloaded every time again. I have been using this fragment for more than a year in the production environment, it works like a charme. Commenting to myself: Yes, I know, it would be more correct to ask if the function exists ... :-)

 if (!$('head > script[src="js/jquery.searchable.min.js"]').length) { $('head').append($('<script />').attr('src','js/jquery.searchable.min.js')); }
+5
Mar 14 '16 at 13:01
source share

Example:

 var a = '<script type="text/javascript">some script here</script>'; $('#someelement').replaceWith(a);

It should work. I tried; same result. But when I used this:

 var length = 1; var html = ""; for (var i = 0; i < length; i++) { html += '<div id="codeSnippet"></div>'; html += '<script type="text/javascript">'; html += 'your script here'; html += '</script>'; } $('#someElement').replaceWith(a);

It worked for me.

Edit: I forgot #someelement (by the way, I could use #someelement due to conventions)

The most important thing here is + = so html is added and not replaced.

Leave a comment if it does not work. I would like to help you!

+2
May 22 '15 at 11:24
source share

There is one workaround that sounds more like a hack, and I agree that this is not the most elegant way to do this, but it works 100%:

Say your AJAX answer is similar to

 <b>some html</b> <script>alert("and some javscript")

Please note that I specifically missed the closing tag. Then, in the script that loads the above, do the following:

 $.ajax({ url: "path/to/return/the-above-js+html.php", success: function(newhtml){ newhtml += "<"; newhtml += "/script>"; $("head").append(newhtml); } });

Just don’t ask me why :-) This is one of those things that I came from as a result of desperate almost random trials and that fails.

I have no complete suggestions on how this works, but, interestingly, it will NOT work if you add the closing tag on one line.

In times like these, I feel that I am successfully dividing by zero.

+1
Dec 15
source share

Here's a more understandable way: no jQuery needed - which adds the script as the last child of the <body> :

 document.body.innerHTML +='<script src="mycdn.js"><\/script>'

But if you want to add and download scripts, use the Rocket Hazmat method .

0
Jun 29 '17 at 23:39
source share

If you are trying to run some dynamically generated JavaScript, you will be a little better using eval . However, JavaScript is such a dynamic language that you really don't need.

If the script is static, then Rocket getScript -suggestion is the way to go.

-3
04 Oct 2018-10-18
source share


More articles:


All Articles