Insertar scripts y CSS con JavaScript en páginas web y documentos HTML

Para agregar dinamismo, interacción por parte de los lectores y modificar el estilo visual de nuestras páginas web, podemos emplear JavaScript.
Todo lo anterior sin recargar la pagina del servidor usando diferentes eventos o acciones del visitante.

Escribir CSS y JavaScript de forma dinámica

Con JavaScript podemos agregar reglas CSS o instrucciones de forma dinámica, de diferentes formas.
En este artículo muestro con ejemplos prácticos, como hacerlo con los métodos createElement() y appendChild().
No es nada difícil, solo se requiere conocimientos elementales de HTML.

Agregar elementos a una página web con createElement() y appendChild()

Con JavaScript podemos crear nuevos elementos usando el método createElement() y posteriormente agregarlos al DOM o HTML con el método appendChild().

Método createElement
El método createElement() crea un nuevo elemento HTML especificando su etiqueta (tagName), por ejemplo un DIV, LINK, SCRIPT, etc., de la siguiente forma:

document.createElement(tagName)

Método appendChild
El método appendChild() permite agregar un nodo o elemento al final del elemento especificado, de la siguiente forma:

elemento.appendChild(elemento2);

Usando estos dos métodos podemos agregar dinámicamente a una página web, sin recargarla del servidor instrucciones de JavaScript y reglas adicionales de CSS para modificar el estilo visual.
Comparto varios ejemplos sencillos a continuación.

Agregar reglas de estilo CSS a una página con JavaScript

Explico el primer ejemplo:

<script>
var st1 = document.createElement('style');
st1.appendChild(document.createTextNode('body{color:red;}'));
document.body.appendChild(st1);
</script>

El método anterior no funciona en iOS. Otra opción más moderna:

<script>
const style = document.createElement('style');
style.textContent = 'body{color: red;}';
document.head.appendChild(style)
</script>

El script se ejecuta en esta misma página al presionar el siguiente botón.
¡Pruébalo!
Agregar CSS
Restaurar
El script se muestra expandido, pero debemos comprimirlo o minimizarlo (quitar espacios), para emplearlo directamente en un enlace o en un botón.
A continuación, muestro el código empleado en el botón anterior.

<button type="button" onclick="javascript:{const style = document.createElement('style');style.textContent = 'body{color: red;}';
document.head.appendChild(style)};">Agregar CSS</button>

Escribir reglas CSS con JavasScript

También podemos hacer lo anterior aplicando directamente las instrucciones de estilo con JavaScript, un método más antiguo que aun funciona.
Regla CSS
Restaurar
Código empleado:

<button type="button" onclick="javascript:document.body.style.color='blue';">Regla CSS</button>

Consulte todas las propiedades de estilo JavaScript que se pueden emplear: Modificar el CSS de las páginas web con JavaScript

Inyectar un archivo externo CSS con JavaScript

Otra forma de agregar de forma dinámica reglas de estilo CCS, es cargar un archivo externo.
En el siguiente ejemplo, en vez de insertar un elemento style, se crea con createElement() un elemento "link" y se le agregan los atributos rel="stylesheet" y href con la dirección URL a un archivo externo CSS.

//Se crea elemento link
var element = document.createElement("link");
//Se agregan los atributos necesarios
element.setAttribute("rel", "stylesheet");
//Se agrega el atributo hreh y la direccion al archivo externo
element.setAttribute("href", "https://archivo.css");
//Se agrega el elemento creado al area del head
document.getElementsByTagName("head")[0].appendChild(element);

Ejemplo práctico
Con el siguiente botón se ejecuta un script similar al anterior, que carga la hoja de estilo de ejemplo "test.css" situada en este servidor, que posee una sola regla: body {color: green;}
Agregar CSS externo
Restaurar

Agregar nuevos elementos al HTML con JavaScript

Los nuevos elementos se pueden agregar en un contenedor existente o en cualquier otro elemento HTML, identificándolos previamente.
También se pueden agregar directamente en el body (cuerpo de la página) usando document.body.
En el siguiente ejemplo se agrega un contenedor <div id="prueba"></div>.

<script>
div = document.createElement('div')
div.setAttribute('id', 'prueba');
document.body.appendChild(div);
</script>

Esto también lo podemos hacer con innerHTML.

Inyectar archivos externos JS con JavaScript en una página

Con innerHTML no podemos hacer lo siguiente, que es insertar un archivo JavaScript externo.
Inyectar código se le llama la acción de agregar código a una página desde un archivo JavaScript externo.
En este ejemplo se inyecta el script de Twitter y se escribe a continuación un elemento "a" que muestra el botón de Twittear.

<script>
const st3 = document.createElement('script');
st3.src = 'https://platform.twitter.com/widgets.js';
document.head.appendChild(st3);
var bott = document.createElement('a');
bott.setAttribute('class', 'twitter-share-button');
bott.setAttribute('data-size', 'large');
document.getElementById('bottwitter').appendChild(bott);
</script>

Pruébalo presionando el siguiente botón y ya de paso tuitea esta página.
Insertar Twitter

Aclaración
Este método es usado por hackers y el malware.
Se comprende lo peligroso que puede ser dar clic en un enlace desconocido, de los que se comparten por el email, clientes de mensajería y en redes sociales.
No hay problema siempre el que el sitio de origen de los scripts sea de confianza.

Como activar las funciones para agregar los scripts

Todas las funciones anteriores se pueden implementar además de con un botón, con otros eventos de Javascript, ya sea un enlace HTML, cualquier elemento donde hacer clic o automáticamente después que la página termine de cargar.
Para eso último se debe emplear el evento addEventListener: Cargar elementos de una página después de finalizar el DOM

Páginas relacionadas

Comparta esta página

Sígueme en las redes sociales