DexterTechWith

Tuesday, September 05, 2006

innerHTML Concatenation Confusion!

For a long time I've tended to do the majority of my DOM manipulation using the innerHTML properties on existing DIVs pre-placed into an HTML document. This seems to have been fine on the whole - and (I believe) can have some performance advantages.

However, recently, I've been building a paged "list view" widget thingamy to go along side a Google Map result display - i.e. plot the points on the map and list the results next to it too. I wanted to build up the list as a block of HTML added into a pre-existing DIV using statements of the style :



$("myListDiv").innerHTML += "[the list control HTML]";

But I also thought I could use Prototype's 'Insertion' class to insert certain blocks into the flow - in this case the div that contains the status information in the form "You are viewing page x of y" and the navigation links (the first/previous/next/last")

I tried for ages using Insertion.Top(), Insertion.Before(), Insertion.After() etc. and the divs just kept appearing on the page in the same place.... grrrrrrrr!!!

Then I realised that if you use innerHTML concatination like this:



$("myOuterDiv").innerHTML += "<div id=\"myInnerDiv\">";
$("myOuterDiv").innerHTML += "A whole load of content";
$("myOuterDiv").innerHTML += "</div>";

The div I openned at the start automatically gets closed straight away by the browser's DOM engine - I didn't expect that! So, the easy way around that is to build up the HTML into a string, then concatenate this in using the '.inerHTML +=' way, everything is cool and groovy.

I guess this may be obvious, but it left me cursing Prototype for a while, and wondering whether I had the latest version.

On an asside to this I wonder why the Prototype site still says the current version is only 1.4.0, when script.aculo.us uses at least version V1.5_rc5?!

0 Comments:

Post a Comment

<< Home