NorfiPC
NorfiPC » JavaScript » Tiempo conectado

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


Por: Norfi Carrodeguas
Actualizado: 20 de enero del 2023
Escribir, agregar o inyectar de forma dinámica reglas de estilo CSS adicionales e instrucciones de JavaScript a una página web, sin recargarla del servidor. Códigos y ejemplos prácticos.
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:
1- Se crea con createElement() un elemento "style".
2- A dicho elemento se le incluye la regla regla CSS: body{color:red;}
3- Se agrega lo anterior con appendChild() al cuerpo del HTML (document.body).
También puede ser en el encabezado con document.head
<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!


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.


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 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.

Escribir contenido con innerHTML y JavaScript

Uno de los métodos más usados es el elemento innerHTML que permite escribir o reemplazar el contenido existente de un elemento con contenido nuevo, en el DOM de una página.
En otro artículo explico cómo usarlo con varios ejemplos: Escribir con JavaScript texto y elementos en páginas web


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.


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



Comparte esta página en Facebook y Twitter
Facebook
Twitter
Share


Sígueme en las redes sociales


Norfipc en Facebook Norfipc en Twitter Canales RSS con las últimas publicaciones

 
Inicio | Mapa del sitio | Buscar | Sobre mí