¿Cómo insertar dinámicamente una etiqueta <script> a través de jQuery después de cargar la página?

Tengo problemas para que esto funcione. Primero intenté configurar mis etiquetas de script como cadenas y luego usar jquery replaceWith () para agregarlas al documento después de cargar la página:

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

Pero obtuve errores literales de cadena en esa var. Luego intenté codificar la cadena como:

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

pero enviando eso a las replaceWith()salidas solo esa cadena al navegador.

¿Alguien puede decirme cómo haría para agregar dinámicamente una <script>etiqueta en el navegador después de la carga de la página, idealmente a través de jQuery?

Puede poner el script en un archivo separado, luego usarlo $.getScriptpara cargarlo y ejecutarlo.

Ejemplo:

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

Intente lo siguiente:

<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 es la forma correcta de hacerlo con JQuery moderno (2014):

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

o si realmente desea reemplazar un div, puede hacer:

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

Una forma más sencilla es:

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

También puede utilizar este formulario para cargar css.

Esta respuesta es técnicamente similar o igual a lo que respondió jcoffland. Acabo de agregar una consulta para detectar si un script ya está presente o no. Necesito esto porque trabajo en un sitio web de intranet con un par de módulos, de los cuales algunos comparten scripts o traen los suyos propios, pero estos scripts no necesitan cargarse cada vez más. Estoy usando este fragmento desde hace más de un año en el entorno de producción, funciona como un encanto. Comentándome a mí mismo: Sí, lo sé, sería más correcto preguntar si existe una función ... :-)

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

Hay una solución que parece más un truco y estoy de acuerdo en que no es la forma más elegante de hacerlo, pero funciona al 100%:

Digamos que su respuesta AJAX es algo como

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

Tenga en cuenta que me he saltado la etiqueta de cierre a propósito. Luego, en el script que carga lo anterior, haga lo siguiente:

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

Simplemente no me preguntes por qué :-) Esta es una de esas cosas a las que he llegado como resultado de ensayos desesperados, casi aleatorios y fallidos.

No tengo sugerencias completas sobre cómo funciona, pero curiosamente, NO funcionará si agrega la etiqueta de cierre en una línea.

En momentos como estos, siento que he logrado dividir por cero.

Ejemplo:

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

Deberia de funcionar. Lo intenté; mismo resultado. Pero cuando usé esto:

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

Esto funcionó para mí.

Editar: olvidé el #someelement(por cierto, podría querer usarlo #someElementdebido a convenciones)

Lo más importante aquí es + =, por lo que el html se agrega y no se reemplaza.

Deja un comentario si no funcionó. ¡Me gustaría ayudarte!

Aquí hay una forma mucho más clara, sin necesidad de jQuery, que agrega un script como último hijo de <body>:

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

Pero si desea agregar y cargar scripts, use el método de Rocket Hazmat .

Si está intentando ejecutar JavaScript generado dinámicamente, sería un poco mejor usar eval. Sin embargo, JavaScript es un lenguaje tan dinámico que realmente no debería necesitarlo.

Si la secuencia de comandos es estática, entonces la getScriptsugerencia de Rocket es el camino a seguir.