Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

151
Vistas
¿Hay alguna sugerencia para agregar jQuery dinámicamente con una función autoejecutable?

Quiero importar jQuery en un archivo JS dinámicamente. Aquí está mi código:

 (function() { var head = document.querySelector("head")[0]; if (head.classList.contains("En-Script") == true) { head.classList.add("En-Script"); var script = document.createElement("SCRIPT"); let EnScript = document.querySelector(".En-Script"); script.type = "text/javascript"; script.src = "./jquery-3.6.0.min.js"; EnScript.appendChild("script"); } else { console.log("class_list_added_for_further_process"); } $(document).ready(function() { console.log("jquery added successfully") }); })();
about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

Hay varios problemas en su código.

  • querySelector devuelve un elemento, y no una matriz, por lo que document.querySelector("head")[0] no tiene sentido.
  • Con if (head.classList.contains("En-Script") == true) { prueba si head tiene la clase En-Script , que no tiene sentido en combinación con head.classList.add("En-Script")
  • Además, agregar una clase al encabezado para verificar si el script está cargado probablemente no sea el mejor enfoque, si desea hacerlo, agregue una clase o un atributo de datos al elemento del script que agregue.
  • Si ya tiene head , ¿por qué usa let EnScript = document.querySelector(".En-Script"); para consultarlo de nuevo?
  • EnScript.appendChild("script"); intenta agregar una cadena de prueba con la secuencia de script de contenido a EnScript y no el elemento que creó y almacenó en la variable de secuencia de script .
  • $(document).ready(function() { no esperaría a que se cargara el script.
  • Llamar a .ready( para cuando cargó jQuery dinámicamente tampoco tiene mucho sentido porque el DOM ya está leído.

Así es como podría verse la carga de un script:

 (function() { var head = document.querySelector("head"); var script = document.createElement("script"); script.type = "text/javascript"; script.onload = function() { // called when the script is loaded and ready to use console.log("jquery added successfully") } script.src = "https://code.jquery.com/jquery-3.6.0.slim.min.js"; head.appendChild(script); })();

about 4 years ago · Juan Pablo Isaza Denunciar

0

Hay algunas cosas mal, estabas comprobando si head tenía la clase "En-Script" y luego agregando la clase a head, así que cambié la validación para que tenga sentido. Luego, estaba seleccionando el encabezado usando querySelector que solo devuelve 1 valor y usando [0] , que funcionaría si estuviera usando querySelectorAll en su lugar.

Luego, debe agregar la función jquery $(document) después de que se haya cargado el script, así que agregué un script.onload para lograr esto.

Además, cuando agrega un elemento secundario, debe enviar el objeto que creó, no una cadena, por lo que en lugar de este EnScript.appendChild("script"); head.appendChild(script);

 (function() { var head = document.querySelector("head"); if (!head.classList.contains("En-Script")) { head.classList.add("En-Script"); var script = document.createElement('script'); script.type = "text/javascript"; script.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"; script.onload = function() { $(document).ready(function() { console.log("jquery added successfully") }); }; head.appendChild(script); } else { console.log("class_list_added_for_further_process"); } })();

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda