Cargar archivos JavaScript dinámicamente

Usualmente cuando necesitamos incluir un archivo JavaScript en una página HTML, hacemos esto:

<script src="nombre_de_archivo_javascript.js"></script>

Y en el moderno JavaScript podemos agregar un atributo async o un defer en la etiqueta script para un mejor desempeño. O mejor aún, podemos cofigurar type="module" para usar el sistema de módulos JavaScript.

Si usamos módulos de JavaScript, sse pueden incluir otros módulos de JavaScript directamente usando import.

import otroModulo from '/otro/modulo.js'

Cargando JavaScript dinámicamente

Un elemento <script> puede ser creado y añadido al DOM como cualquier otro elemento HTML.

const script = document.createElement('script');
script.src = '/mi/script/archivo.js';
document.head.append(script);

const inlineScript = document.createElement('script');
script.innerHTML = 'alert("Inline script loaded!")';
document.head.append(script);

continua… https://aaronsmith.online/easily-load-an-external-script-using-javascript/