Modificar HTML con Javascript

Posted by On enero 12, 2016 1 Comment

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:

  1. Creación de un nodo tipo Element que represente a nuestro elemento
  2. Creación de un nodo tipo Text que represente el contenido del elemento
  3. Añadir el nodo Text como nodo hijo del nodo Element
  4. 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>