Modificar HTML con Javascript
Ya hemos visto cómo acceder a los nodos pero ahora vamos a aprender la forma de modificar HTML con JavaScript para próximamente ir haciendo cosas muy muy interesantes…
Introducir JS en el flujo de salida de HTML
Una de las formas más simples de hace que JS interactúe con HTML es por medio de la función document.write() ésto hará que en la parte donde introduzcamos el siguiente código:
<script> document.write(); </script>
JavaScript irá introduciendo el argumento que queramos ponerle, ya sea una función como date() o código HTML.
Naturalmente esto no es algo demasiado práctico de forma general, y además tenemos que ir introduciendo pequeños códigos JS dentro del HTML que no cumple con las reglas de estilo.
Cambiar el valor del HTML
Esta opción es mucho más válida a la hora de modificar el contenido de nuestra web, consiste en ir obteniendo un nodo, cómo ya vimos en Accediendo a los nodos, y después modificar el HTML que queremos utilizar.
Para ello vamos a utilizar la siguiente instrucción:
document.getElementById(id).innerHTML = nuevo HTML
Como vemos estamos usando la captura por id pero puede ser por etiqueta o por cualquier otro identificador (aunque lo más común es por id) y después se añade el nuevo HTML:
<!DOCTYPE html> <html> <body> <h3 id="cabecera">Hola Mundo!!!</h3> <script> document.getElementById("cabecera").innerHTML = "Hola Marte!!!!"; </script> </body> </html>
Naturalmente este script debe de ir al final del html o mejor aún, la llamada al archivo .js del script, como ya comentamos en su momento en la entrada sobre cómo incluir JavaScript en HTML.
Cambiar el valor de un atributo
Otra operación que podemos realizar con JavaScript es cambiar el valor a los atributos de las etiquetas… aunque puede parecer que esto tiene poca relevancia solo hace falta encontrarse frente a frente con un proyecto de cierta envergadura para descubrir que no es así, por ejemplo si deseamos cambiar el archivo que lee una imagen lo haríamos de la siguiente forma:
<!DOCTYPE html> <html> <body> <img id="imagen" src="logo.gif" width="160" height="120"> <script> document.getElementById("image").src = "entrada.jpg"; </script> </body> </html>
También podemos acceder a los atributos de un nodo guardando el nodo en una variable y luego capturarle el atributo como una propiedad:
var imagen = document.getElementById("imagen"); alert(imagen.src);
Acceder a propiedades CSS
Es posible con JS llegar incluso a poder obtener propiedades CSS, siguiendo con el ejemplo anterior vamos a obtener el margin de la imagen.
Para ellos se debe de utilizar el atributo style de la siguiente forma:
var imagen = document.getElementById("imagen"); alert(imagen.style.margin);
Llegado el caso de que una propiedad CSS sea compuesta, como por ejemplo background-image, el nombre de la propiedad en JS se ve modificada eliminando los guiones – y utilizando camelcase, como vemos en los siguientes ejemplos:
- background-image : backgroundImage
- font-weight : fontWeight
- border-top : borderTop
Crear nuevos elementos HTML
Hemos visto ya la forma en la que se crean los nodos y cómo modificarlos, ahora vamos a analizar los cuatro pasos para crear y añadir un nuevo elemento HTML:
- Creación de un nodo tipo Element que represente a nuestro elemento
- Creación de un nodo tipo Text que represente el contenido del elemento
- Añadir el nodo Text como nodo hijo del nodo Element
- Añadir el nodo Element a la página, en forma de nodo hijo de otro nodo correspondiente al lugar donde queremos insertar nuestro elemento.
Traduciendo estos pasos a JavaScript serían:
//Paso 1: crear el nodo de tipo Element var nodoPadre = document.creatElement("etiqueta"); //paso 2: crear nodo tipo Text var nodoHIjo = document.createTextNode("contenido"); //paso 3: añadir el nodo Text como hijo del Element nodoPadre.appendChild(nodoHIjo); //paso 4: añadir el nodo Element como hijo de la página document.body.appendChild(nodoPadre);
Esto puede resultar un poco lioso, por lo que vamos a ver un ejemplo real de funcionamiento:
<p>Para todos ...</p> <hr /> <input type="button" onclick="create()" value="createElement" /> <script> function create() { // createElement var elementNode = document.createElement('p'); // createTextNode var textNode = document.createTextNode('Saludos'); elementNode.appendChild(textNode); document.body.appendChild(elementNode); } </script>
Aquí hacemos que la función create() se active al pulsar en el botón y es en ella donde se van realizando los cuatro pasos en la misma secuencia que la explicada generando un mensaje.
Eliminar nodos
Es bastante intuitivo pensar que si podemos crear nodos, podremos eliminarlos, y esto es así pero por fortuna es mucho más sencillo, ya que solo es necesario utilizar la función removeChild() que recibe como argumento la id del elemento a eliminar.
Además esta función debe de ser invocada desde el elemento padre de ese nodo que se quiere eliminar, donde la mejor forma para lograrlo es acceder al nodo padre de un elemento mediante la propiedad nodoHijo.parentNode, que se hace de la siguiente forma:
<span id="provisional">...</span> <script> var parrafo = document.getElementById("provisional"); parrafo.parentNode.removeChild(parrafo); </script>
There is One Comment.