innerHTML JavaScript. Modificar texto o html (p.ej. div) en tiempo real. this: acceder al nodo actual (CU01138E)

Resumen: Entrega nº38 del curso "Tutorial básico del programador web: JavaScript desde cero".
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.

logo javascript

 

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:

El

?

?

?

El

poder

?

?

El

poder

de

?

El

poder

de

JavaScript

 

 

 

 

 

 

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.

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

MARZO - ABRIL 2017

1. Java / J2EE
2. Entornos Oracle
3. JavaScript, jQuery
4. .NET, C#
5. Entornos SQL Server
6. HTML, CSS
7. Php, MySql
8. Android, iOS


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.

             Copyright 2006-2017 aprenderaprogramar.com                La web abierta a cualquier persona interesada en la programación