Why innerHTML can ruin your AJAX applications

The reason I am writing this article is because of some work I have been doing recently. My client wants a persistent AJAX application to work in IE6+. This means the web page will be left running for days/weeks on end without being refreshed or the browser being closed. This means it cannot have ANY memory leaks.

I currently process incoming XML using an XSL document - which works very well. However when done under IE6 the XSL transformation is output as plain text [please let me know if there is a DOM alternative] which means the only way to insert my newly transformed code is to use innerHTML. This seems to leak memory like a biatch! Note that the leak doesn't occur in FireFox.

So why does innerHTML leak? Well after some digging I found out a few interesting facts - lets look at the who, where, why and how...

Where did innerHTML come from?
innerHTML is not a standard, it is a proprietary format by Microsoft. Given Microsoft's huge installed base and popularity other browsers included innerHTML for the sake of compatibility. It was never in the w3c specification. It subsequently isn't future proof and isn't designed for xhtml [xml mime type].

Why is innerHTML used?
innerHTML is used as a cheap and easy way to write objects to a container element like a span or DIV. It tends to be faster than traditional DOM methods and takes substantially less time to write. For example you can quickly write a table structure into a DIV container using innerHTML like so:

var myDiv = document.getElementById('myDivId');
myDiv.innerHTML = "<table>
<tr><th>Title</th></tr>
<tr><td>Mr</td></tr>
</table>";

The equivalent code using DOM methods would take up considerably more time and lines of code to accomplish. So for lazy coders or new guys innerHTML provides a great way into the world of JavaScript. To be fair to innerHTML, it works very well for the most part, yes its ugly, its not "right" but if your in a rush and don't have the requirements my client has then it can work very well. You should try, where possible, to avoid it though as it can have unpredictable results and its a bad habit to rely on innerHTML to change or update your web page. DOM methods, in the long run, will serve you better.

So why / how does innerHTML leak memory?
The specific answer to this I do not know but we can theorize a solution. Firstly, as previously discussed, innerHTML is not designed to work with xhtml documents, meaning that it can incorrectly interpret the string you pass to it. This means it doesn't actually render exactly what you ask it to - basically it adds things you never asked for. If you parse the html later on using DOM methods you may run into errors or bugs where the DOM hierarchy isn't as you expected.

Is there a solution?
Yes! Simply don't use innerHTML. I don't think you'll ever find an article, and there are quite a few, that puts in in good light [aside from its obvious benefits]. However if you are in my position and are forced to use it then, apparently, there are a few things you can try doing.

Firstly as the memory leak may be coming from its incompatibility with xhtml it is well worth re-writing your code to accommodate this, or by re-structuring your xhtml in a different way. Unfortunately it's quite hard to know exactly what innerHTML is doing so its a bit of guess work.

If you wish to use DOM methods to replace your existing innerHTML code then please look at this very good article on innerHTML alternatives.

As I said at the start, if anyone reading this is thinking "what a muppet I know the answer" then please leave a comment as I'm sure it would help me, and anyone reading this!