El problema con innerHTML

innerHTML es muy popular debido a la facilidad de su uso para reemplazar completamente los contenidos de un elemento HTML, pero algunos siguen optando por el DOM debido a ciertos inconvenientes que presenta. Pude leer en el blog de Julien Lecomte, del equipo de Yahoo!, un análisis que indica cuáles son los puntos oscuros de inner HTML, pero reconociendo que es lo más eficiente a la hora de modificar el árbol del DOM.

Para Julien, los inconvenientes más destacados son:

• El manejo inapropiado de la propiedad innerHTML puede permitir ataques con inclusión de código en Internet Explorer cuando el HTML contiene un tag diferido:

<script defer>...<script>

• Setear innerHTML destruirá los elementos HTML que tengan event handlers adjuntos, creando potenciales fallas en la memoria en algunos navegadores.
• No obtenemos referencia de los elementos creados, lo que nos obliga a agregar código en forma manual para lograrlo (usando las APIs del DOM).
• No podemos definir la propiedad innerHTML para todos los elementos HTML para todos los navegadores. Por ejemplo, IE no permite definir innerHTML para un elemento table row.

En su blog incluye código generado por Douglas Crockford para solucionar las fallas en el script:

YAHOO.util.Dom.setInnerHTML = function (el, html) {
el = YAHOO.util.Dom.get(el);
if (!el || typeof html !== 'string') {
return null;
}

// Break circular references.
(function (o) {

var a = o.attributes, i, l, n, c;
if (a) {
l = a.length;
for (i = 0; i < l; i += 1) {
n = a[i].name;
if (typeof o[n] === ‘function’) {
o[n] = null;
}
}
}

a = o.childNodes;

if (a) {
l = a.length;
for (i = 0; i < l; i += 1) {
c = o.childNodes[i];

// Purge child nodes.
arguments.callee(c);

// Removes all listeners attached to the element via YUI's addListener.
YAHOO.util.Event.purgeElement(c);
}
}

})(el);

// Remove scripts from HTML string, and set innerHTML property
el.innerHTML = html.replace(/]*>((.|[\r\n])*?)<\\?\/script>/ig, “”);

// Return a reference to the first child
return el.firstChild;
};

Haz clic aquí para entrar al blog de Julien Lecomte.

Fuente: Ajaxian