Propiedad de objetos web innerHTML

La propiedad más interesante de los objetos Web a los que podemos acceder, no forma parte del Standard oficial de HTML.

Se trata de la propiedad innerHTML que fue introducida por Microsoft en Internet Explorer como un método de acceso rápido al contenido completo de un contenedor en HTML. Rápidamente el resto de exploradores lo añadieron en su soporte de lenguaje.

Podemos usar innerHTML para recuperar el contenido actual de un contenedor o insertar nuevo contenido en ese contenedor.

Por contenedor entendemos aquello que está entre las cláusulas < div > y < /div >.

El elemento DIV define un contenedor genérico, el cuál permite a los programadores definir estilos o bloques de contenido.

Como parámetros a DIV tenemos ID, CLASS y ALIGN, aunque éste ultimo cada vez se emplea menos en favor de las CSS.

Ejemplos de uso de DIV.

<div id="primero">
<p>Algún texto.</p>
<p>Un poco más de texto.</p></div>
<div id="segundo"></div>

El primero de los ejemplos muestra 2 párrafos de texto en la página, mientras que el Segundo no muestra nada; simplemente es un contenedor vacío en estos momentos.

Podemos recuperar el contenido de DIV de la siguiente forma:

   var contenido = document.getElementById('primero').innerHTML;

La variable contenido almacena ahora todo el texto de los dos párrafos así como las marcas < p > y < /p >.

Podríamos reemplazar los dos párrafos completamente asignándoles un nuevo valor.

   document.getElementById('primero').innerHTML = '<p>Un parrafo de texto para reemplazar los dos anteriores.</p>’;