Solución a que innerHTML no funcione bien en IE7 y superiores

En uno de mis proyectos de trabajo en mi empresa, me he encontrado con los míticos «Javascript madness«.

Esta vez, el problema surge al intentar modificar la propiedad innerHTML de una etiqueta con texto y así poder modificar su código HTML desde javascript. Aunque el uso de innerHTML no está recomendado por la W3C ya que habría que utilizar createElement y createTextNode, pero sinceramente, es mucho más lento y bastante complejo. Pero claro, el IE tenia algo que decir, y era que no le apetece funcionar con el puñetero innerHTML, unas veces si, otras no… al parecer al meter etiquetas HTML anidadas, deja de funcionar. Muy divertido.

Os pongo un ejemplo:

output = req.responseText;
document.getElementById(pageElement).innerHTML = output;

Si ouput es una etiqueta tipo «ancla«, sin más, todo funcionará y verás cambiar el código HTML de tu etiqueta con id igual a la variable «pageElement«. Pero si metes una tabla, esto no funcionará. Pero solo en IE, ya que el resto de navegadores funcionará bien.

¿Como forzarlo a funcionar?. Pues siguiendo el estándar de la W3C… y como indica este post.

var newdiv = document.createElement("div");
newdiv.innerHTML = output;
var container = document.getElementById(pageElement);
container.appendChild(newdiv);

Y bingo…

Please follow and like us:

2 pensamientos en “Solución a que innerHTML no funcione bien en IE7 y superiores

  1. Pingback: Bitacoras.com

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *