Modificar una página con Javascript
Problema:
Cambiar elementos de una página web de forma dinámica con javascript
El uso de guiones o programas en una página web puede servir para construir o modificar partes de la página o incluso toda ella: desde la etiqueta <html> hasta la etiqueta </html>. Esto puede ser útil cuando el contenido de una página no es fijo sino que depende de unas condiciones concretas.
Por ejemplo: en una página dedicada a fotografías podemos dar al usuario la opción de elegir la imagen que quiera ver y luego construir una nueva ventana con esa imagen y los datos relativos a ella.
Solución
Usar document.write para agregar elementos a la página de forma dinámica.
Se puede usar el método create de los elementos del dom. Este método permite crear cualquier tipo de nodo (div, img, span).
Se compelmenta con el método append. Este método permite añadir un nodo a otro nodo existente en la página
Igualmente diponemos del método remove para eliminar un nodo existente
De esta manera se puede modificar la página de manera dinámica.
Ejemplo
En este ejemplo se va a agregar un enlace a un archivo de estilos CSS ituado en la sección head de nuestra página. Se ativará con un click en un enlace:
function agregaEstilo(){
let lnk = document.create('link');
lnk.setAttribute('rel','stylecheet');
lnk.setAttribute('href', '/estilos-dia.css');
document.head.appendChild(lnk)
}
Puedes invocar a este función mediante un evento o un simple click como el que ves aquí
<a href="javascript: agregaEstilo()">Agregar hoja de estilos</a>