For as long as I've been writing Javascript, I've also had this weird reaction in my stomach whenever innerHTML was used or mentioned. It wasn't anything intense, but really just a small discomfort. innerHTML just never sat well with me.

For those that don't know, innerHTML is a proprietary Microsoft function that allows the browser to manipulate the webpage by exchanging the current HTML with new HTML, derived from a text string. For example: clicking this will change this original text by merely swapping the original lines of code with new lines of code.

For the longest time, the use of innerHTML seemed like cheating to me. Aside from feeling like the "easy" way of doing things (it just seemed too easy), if I used innerHTML in one of my classes at school, I would fail. Plus, innerHTML isn't officially supported by the W3C DOM standard. Ever since I starting using Javascript for DOM manipulation, I was taught that you use W3C DOM scripting like document.createElement to create any dynamic content.

Sure DOM scripting can be annoying and cumbersome, but like I've talked about before, with tools like DomBuilder, that becomes less of an issue. But it's still not perfect.

The last few weeks, I've been working hard at polishing up billQ and getting it ready for an official release (coming very soon). With that, I became extremely worried about performance. I'm already using Prototype (a hefty 45kb+ file) and Script.acul.us' Effects file (30kb+), and with my own javascript files attached, I was looking at Javascript files clocking in at over 150kb. That doesn't even include any of the page or css files. Not only is that tough on the client who has to download all those files, but it also puts a strain on our servers as well. It just hurts the overall experience. Sure a lot of people have broadband now, but the excess file size is unnecessary, it still takes a long time to download.

Since I had already known that innerHTML was in fact faster than DOM scripting, when I ran into an instance where DOM scripting gave me exception errors, I decided to swallow my pride and try using innerHTML to solve the problem. Turns out that I was actually able to reduce my files by almost 300 lines of code (I might even be able to cut it down even more) and reduce the file size by almost 10kb, just by using 3 instances of innerHTML.

In the end, I realized that I was just being pretentious and that there really wasn't any good reason why I wasn't using innerHTML. It was faster and reduced my file size. For the sake of user experience, I had to choose innerHTML over W3C DOM scripting. So why do I still feel so dirty?