Inner HTML al desnudo.

este post fue primero publicado en forosdel web despues de haver notado la duda en muchos usuarios hacerca de innerHTML. Sin mas, aqui el post.

Actualización:(Oct-30-2010) Artificium nos recuerda que innerHTML ahora es parte de la recomendación de HTML5. Habría que hacer pruebas y ver como se comporta. Por ejemplo, ver si sigue afectando los elementos contenido dentro del elemento cuyo innerHTML estamos modificando. Mi recomendación es usar innerHTML para reemplazar por completo el contenido de un elemento, pero evitarlo en lo posible. Mas info en: http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0

Que rayos es el innerHTML?
Bueno, pues según me cuenta mi abuela, innerHTML es otro de los raros inventos de MS, si MS es por Micro Soft. Como es de esperarse, innerHTML no forma parte de ningún estándar, o al menos no que buzu sepa, pero es como esos malditos videos de youtube, adictivo y una vez que lo usas es imposible dejar de hacerlo y es que neta que ¿Quien va a preferir echarse 20 lineas de código al hilo nomas pa’ generar un enlace con estilos dentro de un h3 y agregarlo al documento cuando puede usar innerHTML y no gastar mas que si acaso un par de lineas?. Sin embargo, innerHTML es también un método [es mas bien una propiedad] ampliamente soportado y que la mayor parte del tiempo puede usarse sin problemas.

A mi me encanta leer. Sera mi tipo?
InnerHTML es un buen lector. Considera que tienes lo siguiente:

Código HTML:
<div id="p1">
     <p>Este es un párrafo dentro de un div con id igual a <em>p1</em>.</p>
</div>

Si hicieras una llamada a la propiedad innerHTML de este modo:

Código: 

var contenido = document.getElementById('p1').innerHTML

recibirías un string que contendría lo siguiente:

Código HTML:
<p>Este es un párrafo dentro de un div con id igual a <em>p1</em>.</p>

Esto puede ser muy util en ciertas circunstancias. Por otro lado, innerHTML es una propiedad de escritura y no solo de lectura, lo que quiere decir que puedes indicar lo siguiente:

Código: 

document.getElementById('p1').innerHTML = "A la goma con el contenido anterior."

Eso reemplazaría el contenido anterior por el texto entre comillas (“”) después de el signo igual (=). Con lo que tu HTML quedaría de la siguiente manera:

Código HTML:
<div id="p1">
     A la goma con el contenido anterior.
</div>

Cuales son sus desventajas?
La primera desventaja que nos encontramos al querer usar innerHTML es que no es estándar. Hubo un tiempo, no hace mucho, que se puso de moda el poner el logotipo de la W3C en los sitios web para indicar que eran sitios web estándar. Aun que ya no esta tan de moda esa tendencia, el desarrollo estándar sigue teniendo gran peso para muchos clientes (especialmente los que entienden del tema) a la hora de contratar un desarrollador web.

Otra desventaja que encontramos es que un mal uso podría terminar echando a perder el árbol de tu documento. Cuando usas métodos DOM, como es el caso de createElement, no hay manera de que el contenido generado este mal formateado. Sin embargo, con el innerHTML si existe esa posibilidad. Por supuesto que desarrolladores precavidos por lo regular no comenten esa clase de errores, pero no falta algún despistado que termine haciendo algo como:

Código: 

mielemento.innerHTML = "<spam>Ya jodí mi <a href="">código</spam></a>";

Ventajas?
Ye mencione algunas de sus ventajas, pero creo que la mejor es que nos permite trabajar a mayor escala y con mas rapidez.

Generalmente, en un post o cualquier otra cosa, te sugeriría que te apegaras a los estándares, pero aquí simplemente muestro los hecho sin plantear mi opinión en ningún momento. Por lo tanto te dejare a ti ser el juez y tomar la mejor decisión en cuanto a permanecer estándar o irte al lado de innerHTML. Algunas veces una combinación de ambas posturas es lo mejor que puedes hacer.

Saludo y espero que te haya servido esta breve introducción al innerHTML. Algunos puntos estan basados en la seccion innerHTML del libro Bulletproof Ajax de Jeremy Keith.

4 thoughts on “Inner HTML al desnudo.

  1. Buzu, está bien tu artículo, pero ahora permíteme actualizar un poco la cosa. innerHTML ahora si forma parte del estándar pero de HTML5. Gracias por eso señores de la W3C.

  2. no se por que ese ataque constante a lo que hace microsoft.
    son responsables de muchos de los avances informáticos, y han contribuido mucho mas que cualquier otra empresa del mismo rubro.
    y no olvidemos que son los que trajeron la tecnología ajax a la luz.
    Trabajar a bajo nivel es para los lenguajes compilados, y no para los interpretados.
    Creo que todos los que se quejan de esta función son aquellos que abusan compulsivamente de jquery
    innerhtml es algo que desde su aparición fue adoptado por los mejores navegadores. por lo tanto, quien trate de desvalorizarlo, simplemente se equivoca.

    hoy por hoy, podría decirse que es google chrome el que esta marcando el rumbo

    • Muy cierta tu aportacion, y de hecho, yo no estoy criticando innerHTML. Por el contrario, personalmente me parece una herramienta super eficaz en muchos casos. En cuanto a MS, le criticamos el navegador. Por ejemplo, justo ahora estoy en un lio por la falta de soporte a btoa en IE. Un problema que solo tomaria 5 minutos en resolver se combierte en una pesadilla, y eso pasa muy a menudo con IE.

      Yo no trato de desvalorizar innerHTML, pero si estoy conciente de algunas de las muchas malas caras de IE y de los malos ratos que nos hace pasar.

Comments are closed.