innerHTML al desnudo.

[buzu]

Eh regresado a Foros del web después de un lago tiempo de inactividad y me eh dado cuenta de que hay una considerable cantidad de usuarios preguntando acerca del innerHTML, o al menos así me parece. Es por eso que eh decidido escribir este breve articulo, si se le puede llamar así, acerca del tan misterioso innerHTML. Como siempre, escribiré con mi característico sarcasmo que algunos confunden con prepotencia, presunción y cosas mas. Espero no ofender a nadie, y si entraste acá esperando ver HTML porn, lamento decepcionarte, esto por aquello de al desnudo.

Sin mas, entremos en materia.

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.

[David]

Excelente aporte, buzu.

Recuerda que también puedes colocar en las FAQ's los códigos relativos a preguntas frecuentes en el foro.

Saludos

[buzu]

OK! Gracias.

[caricatos]

Hola:

Para fastidiar un poco la cosa ...

Si tenemos algo así:
<div id="trampa">
<table>
<tr>
<td>
¡Aquí falla algo!
</td>
</tr>
</table>
</div>

¿Qué nos muestra la instrucción innerHTML del div con id="trampa"?

Sobre el tema de la rapidez, creo que alguien ya ha hecho algunas pruebas, y más rápido era el DOM puro (tal vez haya sido derkenuke :pensando (¡Hola )

Saludos

[Bellenger]

Interesante, nunca hubiera imaginado que saldria esto:

Código HTML:

<table>
<tbody>
<tr>
<td>
¡Aquí falla algo!
</td>
</tr>
</tbody>
</table> 

Y jugando un poco con el codigo de caricatos:

Código HTML:

<div id="trampa">
<table>
<tr><th>error</th></tr>
<tbody>
<tr>
<td>
¡Aquí falla algo!
</td>
</tr>
</tbody>
</table>
</div> 

me tope con este otro detallito, pruebenlo y vean...
Que bueno que lei el post, servira mucho a comprender ciertos errores al utilizar innerHTML.
Saludos...

[buzu]

Caricatos, cuando hablaba de la rapidez, me refería a la rapidez con la que escribes el código. Ahí si no me vas a decir que es mas rápido escribir un montón de createElement y appends que un simple innerHTML. Como quiera que sea y aun que dije que no daría mi opinión, yo no lo recomendaría ampliamente.

[buzu]

Ah, por cierto, con respecto a lo del código, es un buen detalle, debo confesar que no lo sabia. Sin embargo, en la gran mayoría de los casos, por no decir en todos, no causaría gran problema. Buen aporte caricatos.