Append javascript script to head doesnt work

Question

I am trying to append a script tag with a script on the head of a page, but I am appending the code and it doesnt work. Probably because the page is already running.

How can I have something like this work?

$(document).ready(function () {
    $('a').on('click', function () {
        $('head').append('&ltscript&gtconsole.log("running")&lt/script&gt');
    });
});

http://jsfiddle.net/jtjmy5gy/6/

So basically you want to write JS using JS. Why would you do this? You could just define a function and call it when needed. — oshell, Jun 02 '15 at 10:24
http://stackoverflow.com/questions/3857874/how-to-dynamically-insert-a-script-tag-via-jquery-after-page-load — George, Jun 02 '15 at 10:25
@HoschNok I'm building a chrome extension and I need to inject a script dynamically. — gespinha, Jun 02 '15 at 10:28
@GEspinha Chrome already has functions for this - https://developer.chrome.com/extensions/tabs#method-executeScript — CodingIntrigue, Jun 02 '15 at 10:29

Nishit Maheta · Accepted Answer · 2015-06-02T10:46:51.337

1

Try

DEMO

$(document).ready(function () {
  $('a').on('click', function () {
     $('<script>').text('console.log("running")').appendTo('head');
  });
});

EDIT

call Function using above Example : DEMO

$(document).ready(function () {
   $('a').on('click', function () {
     $('<script>').text('test()').appendTo('head');
   });
});

function test(){
  console.log("running")
}

Edit . you can also append script tag like below : DEMO

$("head").append($("<script />", {
   text: 'test()',
}))

$("head").append($("<script />", {
   html: 'test()',
}))

$("head").append($("<script />", {
   src: url,
}))

edited Jun 02 '15 at 10:46

answered Jun 02 '15 at 10:28

Nishit Maheta

6,021
3
17
32

What if I have a larger script to add to the head? – gespinha Jun 02 '15 at 10:29
you need to write every thing in text(). or you can directly call a function – Nishit Maheta Jun 02 '15 at 10:30
May i know the reason why you want to code like this . when you can use any function or any logic base on events ?? – Nishit Maheta Jun 02 '15 at 10:51
I need this code to run a couple of scripts dynamically through a chrome extension, thanks :) – gespinha Jun 02 '15 at 11:03

score 0 · Answer 2 · edited May 23 '17 at 12:21

0

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

$.getScript("test.js", function(){
    alert("Running test.js");
});

Source: Rocket Hazmat

How to dynamically insert a <script> tag via jQuery after page load?

edited May 23 '17 at 12:21

Community

1
1

answered Jun 02 '15 at 10:26

George

6,630
2
29
36

The script in question doesn't have an `src`, it's just an inline script – CodingIntrigue Jun 02 '15 at 10:26
Yes, I its just an inline script – gespinha Jun 02 '15 at 10:27

Append javascript script to head doesnt work

2 Answers2