Como inserir dinamicamente uma tag 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, usando jquery replaceWith () para adicioná-las ao documento após o carregamento da página:

var a = 'some script here'; $('#someelement').replaceWith(a); 

Mas eu tenho erros literais de string nessa var. Eu então tentei codificar a string como:

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

mas enviar isso para replaceWith() apenas aquela string para o navegador.

Alguém pode, por favor, me avisar como você iria adicionar dinamicamente uma tag no navegador após o carregamento da página, de preferência via jQuery?

Você pode colocar o script em um arquivo separado e usar $.getScript para carregá-lo e executá-lo.

Exemplo:

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

Tente o seguinte:

  

http://api.jquery.com/append

Aqui está a maneira correta de fazer isso com o JQuery moderno (2014):

 $(function () { $(' 

ou se você realmente quiser replace um div que você poderia fazer:

 $(function () { $(' 

Uma maneira mais simples é:

 $('head').append(''); 

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

Esta resposta é tecnicamente semelhante ou igual à que a jcoffland respondeu. Acabei de adicionar uma consulta para detectar se um script já está presente ou não. Eu preciso disso porque trabalho em um site de intranet com alguns módulos, dos quais alguns compartilham scripts ou trazem os próprios, mas esses scripts não precisam ser carregados novamente. Eu estou usando este trecho desde mais de um ano no ambiente de produção, ele funciona como um charme. Comentando para mim: Sim, eu sei, seria mais correto perguntar se existe uma function … 🙂

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

Há uma solução que soa mais como um hack e eu concordo que não é a maneira mais elegante de fazê-lo, mas funciona 100%:

Diga que sua resposta AJAX é algo como

 some html  

Note que eu 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 que 🙂 Essa é uma daquelas coisas que eu vim como resultado de tentativas quase aleatórias e fracassadas.

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

Em tempos como estes, sinto-me dividido com sucesso por zero.

Exemplo:

 var a = ''; $('#someelement').replaceWith(a); 

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

 var length = 1; var html = ""; for (var i = 0; i < length; i++) { html += '
'; html += ''; } $('#someElement').replaceWith(a);

Isso funcionou para mim.

Edit: eu esqueci o #someelement (btw eu poderia querer usar #someElement por causa de convenções)

O mais importante aqui é o + =, então o html é adicionado e não substituído.

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

Aqui está uma maneira muito mais clara – não há necessidade de jQuery – que adiciona um script como o último filho de :

 document.body.innerHTML +=' 

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

Se você está tentando executar alguns JavaScript gerados dinamicamente, você seria um pouco melhor usando eval . No entanto, JavaScript é uma linguagem tão dinâmica que você realmente não deveria precisar disso.

Se o script é estático, a getScript do Rocket é o caminho a percorrer.