Hasta hace unos meses, bastantes ya, creía que innerHTML era lo mejor que existía, pero debido a varios problemas con los que el uso hace que encuentres me di cuenta que no podía estar más equivocado. Este artículo que me he encontrado en mi del.icio.us relata las alternativas a este método.
¿Que problemas tenemos con innerHTML?
- Para empezar innerHTML no es estandard, osea es propiedad de M$, y por ello ya no puede tener nada bueno.
- Las aplicaciones futuras basadas en el MIME Type
application/xhtml+xmse supone que no soportará esta propiedad en un futuro. - La propiedad funciona como un String, dejando fuera cualquier interacción con el DOM que intentamos introducir/sacar.
- Al tratarse de una cadena de texto, obtenemos problemas en algunos casos con comillas, aperturas de tags y demás, ejemplos los comentarios de esta página.
Crear multiples elementos
A partir de un Array, decidimos crear una lista de elementos mediante innerHTML y despues usando DOM.
innerHTML:data = new Array("one","two","three"); mHTML = "<ul>"; for(i=0;i<data.length;i++) { mHTML+="<li>" + data[i] + "</li>"; } mHTML+="</ul>"; document.getElementById("mContainer").innerHTML = mHTML;
De esta forma definimos todo el HTML necesario con el que construiremos nuestra lista, usando propiedades DOM la cosa sería asi.
data = new Array("one","two","three");
// create the UL element that our LI elements will descend from
eUL = document.createElement("ul");
// loop over the length of the "data" array
for(i=0;i<data.length;i++) {
// create an LI
eLI = document.createElement("li");
// append the value of data[i] to the LI as a text node
eLI.appendChild(document.createTextNode(data[i]));
// append the LI to the UL
eUL.appendChild(eLI);
}
// append the UL to the "mContainer" element.
document.getElementById("mContainer").appendChild(eUL);Conclusion
Pese a ser más engorroso el código, esto nos permite posteriormente recorrer este código y modificarlo como si se tratase de contenido cargado con la página inicialmente, lo cual te da una flexibilidad que innerHTML no te da. De todas formas, como siempre digo en estas cosas, hay que mirar para que, cuando, como lo voy a utilizar. Y sabiendo eso, usar lo más se adapte a la situción.
17 comentarios, 10 referencias
+
#