Codificación aprenderaprogramar.com: CU01138E
INNERHTML JAVASCRIPT
La propiedad innerHTML de los nodos de tipo elemento nos permite acceder al código HTML comprendido entre las etiquetas de apertura y cierre que definen el nodo y modificarlo si lo deseamos. La aplicación más sencilla puede ser modificar un texto, pero el verdadero potencial de innerHTML es el de modificar el código HTML en sí, no solo el texto.
Mucha gente usa innerHTML para modificar texto, pero realmente tenemos otras opciones para hacer modificaciones en texto: textContent o nodeValue nos pueden servir para ello.
La sintaxis a emplear normalmente será del tipo:
|
nodoAlQueAccedemos.innerHTML = 'Nuevo código HTML en el nodo'; |
Los nodos que admiten el uso de innerHTML son los tipo Element con capacidad para contener código HTML. Por tanto, no obtendremos resultado si tratamos de aplicarlo a otro tipo de nodos como los de tipo texto. Escribe este código en tu navegador, guárdalo con extensión html y comprueba los resultados.
|
<!DOCTYPE html> <html> <head> <title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8"> <style type="text/css"> body {font-family: sans-serif; text-align:center; } div {width: 600px; background-color:yellow; overflow:hidden; margin: 5px auto;} h2 {width: 80%; background-color:#DEB887; cursor:pointer; margin: 10px auto; } </style> </head> <body> <div> <h2 onclick="alert(this.nodeName)">Haz click aquí para ver el nodeName de this</h2> <h2 onclick="alert(this.nodeName)">Haz click <span style="color:blue;">aquí para ver el nodeName de this</span></h2> <h2>Haz click <span onclick="alert(this.nodeName)" style="color:red;">aquí para ver el nodeName de this</span></h2> <h2 onclick="alert(this.firstChild.nodeName)">Haz click aquí para ver el nodeName del hijo de h2</h2> <h2 onclick="this.firstChild.nodeValue='Aaaaaaah!'">Haz click aquí para modificar el texto en el hijo del nodo h2 usando NodeValue</h2> <h2 onclick="this.textContent='Eeeeeeeh!'">Haz click aquí para modificar el texto en hijo derivado del nodo h2 usando textContent</h2> <h2 onclick="this.innerHTML='Siiiiiih!'">Haz click aquí para modificar el texto con innerHTML del nodo h2</h2> <h2 onclick="alert('Contenido innerHTML actual es: '+this.innerHTML); this.innerHTML='<div style=\' width:50%; border-style:solid; background-color: #FF7F50; \'>Ahamham!</div>'"> Haz click aquí para modificar el código con innerHTML del nodo h2</h2> <h2 onclick="this.textContent='Uuuuuuh!">Haz click <span style="color:blue;">pero no existe un textContent modificable</span></h2> <h2 onclick="alert('Obtenemos: '+this.textContent)">Haz click <span style="color:blue;">para ver el textContent</span> y verás</h2> <h2 onclick="this.firstChild.innerHTML='No podemos'">Si intentamos modificar un nodo texto con innerHTML...</h2> </div> </body> </html> |
REFERENCIAR UN NODO USANDO LA PALABRA CLAVE THIS
Para interpretar este código hemos de tener en cuenta que la palabra clave this aplicada dentro de un manejador de evento onclick nos devuelve el nodo de tipo Element definido por las etiquetas HTML donde se define el onclick. Por ejemplo: <h2 onclick="alert(this.nodeName)">Hola</h2> nos devuelve el nodeName del nodo definido por las etiquetas <h2> … </h2> y este nodeName es H2. Recordar que de acuerdo con la estructura de construcción del DOM, el nodo H2 tendrá como hijo un nodo de tipo texto cuyo nodeValue será Hola.
Los resultados esperados cuando visualizamos y comprobamos el código HTML que hemos puesto como ejemplo anteriormente son (comprueba tú si obtienes estos mismos resultados o no):
|
Cuando hacemos click sobre |
Se muestra |
Comentarios |
|
Haz click aquí para ver el nodeName de this |
H2 |
Es el nodo para el cual está definido el evento onclick |
|
Haz click aquí para ver el nodeName de this |
H2 |
Aunque el nodo H2 tenga un nodo hijo span, el nodo para el que está definido el evento onclick es H2 y por tanto this hace referencia a este nodo. |
|
Haz click aquí para ver el nodeName de this |
SPAN |
Al haber modificado el onclick y asociarlo al span, el nodo referenciado por this pasa a ser el SPAN |
|
Haz click aquí para ver el nodeName del hijo de h2 |
#text |
Estamos aludiendo a firstChild de H2, que es el nodo de tipo texto que contiene el texto que se muestra en pantalla |
|
Haz click aquí para modificar el texto en el hijo del nodo h2 usando NodeValue |
Aaaaaaah! |
Modificamos el texto accediendo al nodo de tipo texto y modificando su valor nodeValue |
|
Haz click aquí para modificar el texto en hijo derivado del nodo h2 usando textContent |
Eeeeeeeh! |
Modificamos el texto usando textContent (texto contenido en los nodos derivados del referenciado) |
|
Haz click aquí para modificar el texto con innerHTML del nodo h2 |
Siiiiiih! |
Modificamos el texto modificando el código HTML interno al nodo |
|
Haz click aquí para modificar el código con innerHTML del nodo h2 |
Ahamham!* |
Se muestra el texto Ahamham! dentro de un rectángulo de color anaranjado |
|
Haz click pero no existe un textContent modificable |
-- |
No hay resultado. Se puede modificar el textContent si sólo existe texto asociado a un nodo hijo, pero en este caso el texto está repartido entre varios nodos hijos. |
|
Haz click para ver el textContent y verás |
Muestra un mensaje |
Se muestra el mensaje: Obtenemos: Haz click para ver el textContent y verás. Esto demuestra que el textContent concatena los textos obtenidos del recorrido de los diferentes nodos sucesores donde aparezca texto. |
|
Si intentamos modificar un nodo texto con innerHTML... |
-- |
No hay resultado. No se puede modificar un nodo tipo texto usando innerHTML porque innerHTML aplica solo a los nodos de tipo Element. |
* En este caso tenemos el siguiente comportamiento:
Al hacer un primer click
Se nos muestra un mensaje: “Contenido innerHTML actual es: Haz click aquí para modificar el código con innerHTML del nodo h2”. Esto refleja que dentro de la etiqueta h2 únicamente tenemos un texto.
Al hacer un segundo click
Se nos muestra un mensaje: “Contenido innerHTML actual es: <div style=" width:50%; border-style:solid; background-color: #FF7F50; ">Ahamham!</div>”
Esto refleja que el anterior contenido dentro de h2 ha desaparecido. Ahora dentro de la etiqueta h2 tenemos un div al que hemos aplicado estilos haciendo que muestre un color de fondo naranja, un borde, y que contiene el texto Ahamham!
Sin embargo, el código fuente o código HTML asociado a la página que nos facilita el navegador (que podemos visualizar accediendo a él a través de opciones de menú) no ha cambiado. Esto significa que se trata de cambios dinámicos que son controlados por el navegador y no se reflejan en que el código fuente “accesible” sea distinto en cada momento. O dicho de otra manera: la visualización de una página web puede no coincider con lo que veamos que indica el código fuente si dicho código fuente ha sido manipulado dinámicamente con JavaScript.
LA POTENCIALIDAD DE INNERHTML
innerHTML tiene una gran potencialidad debido a que nos permite generar código HTML dinámicamente y esto facilita la manipulación de páginas web y la creación de efectos hasta los límites de nuestra imaginación. Todo ello a pesar de que históricamente no formaba parte del lenguaje JavaScript. Se convirtió es un estándar de facto, es decir, no formando parte de la especificación oficial JavaScript sin embargo fue introducido y aceptado por todos los navegadores.
En la próxima entrega del curso veremos un ejemplo más avanzado de utilización de innerHTML para el control dinámico de procesos en el frontEnd. Si el término frontEnd te resulta extraño, ten en cuenta que suele usarse en alusión a código que se ejecuta del lado del cliente, mientras que backEnd suele usarse en alusión a procesos del lado del servidor. El trabajo con JavaScript se califica normalmente de trabajo en el frontEnd de las aplicaciones web.
EJERCICIO
Crea un documento html con div central (“el cuadrado principal”) que contenga a su vez cuatro divs (los cuadrados secundarios). Debajo del cuadrado principal debe aparecer un botón con el texto “Avanzar”. Inicialmente los cuatro cuadrados tendrán fondo blanco y un signo ? de gran tamaño. Al pulsar en el botón por primera vez, el cuadrado superior izquierdo debe aparecer con fondo negro, texto blanco, y tener como texto “El”. Al pulsar de nuevo el botón, el cuadrado superior derecho debe aparecer con fondo blanco y texto negro y tener como texto “poder”. Al pulsar de nuevo el botón el cuadrado inferior izquierdo debe aparecer con fondo blanco y texto negro y tener como texto “de”. Al pulsar de nuevo el botón el cuadrado inferior derecho debe aparecer con fondo amarillo y texto negro y tener como texto “JavaScript”. Si se pulsa nuevamente el botón avanzar debe mostrarse un mensaje que indique “No es posible avanzar más”.
Aquí resumimos cómo tiene que ser el cambio:
Inicialmente:
|
? |
? |
|
? |
? |
A medida que se pulse el botón Avanzar irá apareciendo:
Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link: Ver curso completo.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.
