6 Jan 2006 forrest   » (Journeyer)

To innerHTML or not to innerHTML; that is the question

So I'm dinking along on my web gallery project "photopage", and I've gotten to the point where the administrator gets to add, delete, and re-order photo albums. I'm doing this all in DHTML, and will only send the information back to the server (somehow ... still foggy on that part) when all the changes have been made.

I really enjoyed DHTML programming way back when I did Hanzi Quiz, but in that project I always used document.getElementById() to manipulate the data displayed on a essentially static DHTML document set up at the start. Now I want to add (and delete) an indefinite number rows from a table in response to a user's clicks. Assigning a unique id to each node of interest is not the way to go here.

I'm just working on adding now. When the user clicks an "insert album here" button, a new <tbody> containing two rows (an "insert button" row and an album data row) is inserted just above the clicked button.

This would be easy to do with innerHTML, but that's not a W3C standard. Apparently innerHTML is usually faster that using the W3C DOM methods, but I'm not the only one who's uncomfortable using it.

I have to share this quote from one of the comments in the last-linked blog:

Oh, great. Now innerHTML will be forever personified in my mind as a smirking, raven-haired seductress in a dress cut down to here and slit up to there, throwing herself at me despite my best efforts to walk the straight and narrow of semantically correct code.

I think that sums it up nicely.

My current stab at adding this new <tbody> is to clone the first one in the document, then fish about with some ugly scripting for the textNodes whose values I want to change. I have a lot of code that looks something like this:

  var tr = new_node.lastChild;
   while (tr.nodeName.toLowerCase() != "tr") { tr = tr.previousSibling; }

At that point, I had to ask myself aren't there any javascript libraries out there to simplify this kind of DOM traversal? I thought there had to be, but searching around on freshmeat and sourceforge and google only turned up libraries that for very specific graphic effects and some convoluted XMLish stuff for AJAX.

I realized I could write a simple recursive function that would allow me to write the new DHTML subtrees I want to create as simple javascript objects -- almost as simple as innerHTML -- something like this:

new_node = createHTMLnode(
   tag : "tbody",
   contents : [ {
                  tag : "tr",
                  contents : [ {
                                  tag : "td"
                                  contents : [ "first cell" ]
                                  tag : "td"
                                  contents : [ "second cell" ]

That might be nice, but I have this feeling that I'm working in a vacuum. Is anyone else interested in this stuff? I could do all this work and it would be beautiful inside, but it would be stuck inside my obscure application that will probably only ever be my personal web gallery ...

... so why not just use innerHTML and be done with it?

Latest blog entries     Older blog entries

New Advogato Features

New HTML Parser: The long-awaited libxml2 based HTML parser code is live. It needs further work but already handles most markup better than the original parser.

Keep up with the latest Advogato features by reading the Advogato status blog.

If you're a C programmer with some spare time, take a look at the mod_virgule project page and help us with one of the tasks on the ToDo list!