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") }); })();
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.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")
script
que agregue.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..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); })();
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"); } })();