Como inserir dinamicamente uma tag <script> via jQuery após o carregamento da página?

Estou tendo problemas para fazer isso funcionar. Primeiro tentei definir minhas tags de script como strings e, em seguida, usar jquery replaceWith () para adicioná-las ao documento após o carregamento da página:

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

Mas recebi erros literais de string nessa var. Em seguida, tentei codificar a string como:

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

mas enviar isso para a replaceWith()saída apenas aquela string para o navegador.

Alguém pode me dizer como você faria para adicionar dinamicamente uma <script>tag ao navegador após o carregamento da página, de preferência via jQuery?

Você pode colocar o script em um arquivo separado e usá-lo $.getScriptpara carregá-lo e executá-lo.

Exemplo:

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

Experimente o seguinte:

<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

Esta é a maneira correta de fazer isso com o JQuery moderno (2014):

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

ou se você realmente deseja substituir um div, pode fazer:

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

Uma maneira mais simples é:

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

Você também pode usar este formulário para carregar o css.

Essa resposta é tecnicamente semelhante ou igual à que jcoffland respondeu. Acabei de adicionar uma consulta para detectar se um script já está presente ou não. Preciso disso porque trabalho em um site de intranet com alguns módulos, alguns dos quais compartilham scripts ou trazem seus próprios, mas esses scripts não precisam ser carregados sempre novamente. Estou usando este snippet há mais de um ano em ambiente de produção, funciona como um encanto. Comentando para mim mesmo: Sim, eu sei, seria mais correto perguntar se existe uma função ... :-)

if (!$('head > script[src="js/jquery.searchable.min.js"]').length) {
    $('head').append($('<script />').attr('src','js/jquery.searchable.min.js'));
}

Existe uma solução alternativa que parece mais um hack e concordo que não é a maneira mais elegante de fazer isso, mas funciona 100%:

Digamos que sua resposta AJAX seja algo como

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

Observe que pulei a tag de fechamento de propósito. Em seguida, no script que carrega o acima, faça o seguinte:

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

Só não me pergunte por quê :-) Esta é uma das coisas que cheguei como resultado de tentativas desesperadas quase aleatórias e falhas.

Não tenho sugestões completas sobre como funciona, mas curiosamente, NÃO funcionará se você acrescentar a tag de fechamento em uma linha.

Em tempos como estes, sinto que consegui dividir por zero.

Exemplo:

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

Deve funcionar. Eu tentei; mesmo resultado. Mas quando usei isso:

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

Isso funcionou para mim.

Edit: Eu esqueci o #someelement(aliás, talvez eu queira usar #someElementpor causa das convenções)

A coisa mais importante aqui é o + = para que o html seja adicionado e não substituído.

Deixe um comentário se não funcionar. Eu gostaria de te ajudar!

Aqui está uma maneira muito mais clara - sem necessidade de jQuery - que adiciona um script como o último filho de <body>:

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

Mas se você quiser adicionar e carregar scripts, use o método Rocket Hazmat .

Se você estiver tentando executar algum JavaScript gerado dinamicamente, ficará um pouco melhor usando eval. No entanto, JavaScript é uma linguagem tão dinâmica que você realmente não deveria ter necessidade disso.

Se o script for estático, a getScript-sugestão de Rocket é o caminho a percorrer.