Ok, so i finally ran into troubles with the innerHTML property in FireFox, heard that it has some issues, never really saw any tho until today.

Problem: when using innerHTML as such


The somethingNew variable no longer references the somethingNew div tag in the new HTML. This seems odd at first, but maybe when you think about it. When you "add" stuff to innerHTML, you are not really adding anything, you are changing the property and concatenating the old HTML to the new one. By doing this you are forcing the page to be rendered again, but the variable you used points to the old element, which might be the same, but you didn't update it. This thing gave me quite a headache today to be honest.

The solution: for IE don't use innerHTML! It has something which seems to work alot better: insertAdjacentHTML(position, html). This little piece seems to do magic, and not a lot of people know about it for some reason. There one proof that IE can be better than FF lol (don't kill me with its drawbacks IE has i know i've been there almost killed myself then). Now for firefox, fix well, you can do it the dirty way and update the variables after you finished changing the HTML. You can do this just by using this workaround i just found, which i must say looks promising. But this article is pretty old, so there must be something better by now.

Is it better using DOM elements for non-IE browsers to create new HTML? or more specific DIV tags? Is there a better workaround out there?

This post has been edited by Mike007: 12 Jun, 2008 - 12:20 AM

Why not use actual DOM elements? Something like this:

Yeah this actually works pretty great in FF, as smooth as it can get. But i heard that IE has problems with that sometimes, so i guess i'll use the old insertAdjacentHTML function to be safe for IE.

Thanks alot

while I'm always having to declare variables after the innerhtml has been modified, I think it is worth the increased performance over the DOM method. read this link to see what I'm talking about:

http://www.quirksmode.org/dom/innerhtml.html#t10

It's true that in a lot of cases, innerHTML is faster - but from a cross-browser safety point of view, DOM is probably safer - I don't think I've ever encountered an issue with something in the DOM that Firefox did and IE didn't - although I have encountered that issue with innerHTML before(try setting the innerHTML of a tr - FF will let you, and IE won't. IE's is actually the valid behavior in this case).