innerHTML and tables? <tr>'s and <td>'s vanish.

[jlizarraga]

Hi all,

With a lot of help from this forum and the YUI library, I've been making this:

http://www.autofusion.com/development/mm3/inventory.html

(note that lots of features don't actually do anything yet and some or all parts might break intermittently as I work on this)

The results are generated with innerHTML. Here is an example of the string that generates a standard result:


var oResultHTML = '\
<div class="mm3_LargeResult">\
<div class="mm3_ResultThumbnail">\
<img src="' + oVDArray[i].img + '" alt="Sample Vehicle" />\
</div>\
<div class="mm3_ResultData">\
<div class="mm3_ResultTitle">\
' + oVDArray[i].year + ' ' + oVDArray[i].make + ' ' + oVDArray[i].model + '<br />\
<span>' + oVDArray[i].trim + '</span>\
</div>\
<div class="mm3_ClearDiv"></div>\
<div class="mm3_ResultInfo">\
Condition: ' + oVDArray[i].cond + ' | Color: ' + oVDArray[i].color + '<br />\
Engine: ' + oVDArray[i].engine + ' | Doors: ' + oVDArray[i].doors + '<br />\
Transmission: ' + oVDArray[i].trans + ' | Drive: ' + oVDArray[i].drive + '<br />\
MPG: ' + oVDArray[i].mpg + ' | Mileage: ' + oVDArray[i].mileage + '<br />\
Stock#: ' + oVDArray[i].stock + ' | VIN: ' + oVDArray[i].vin + '\
</div>\
<input type="hidden" name="vin" value="' + oVDArray[i].vin + '" />\
</div>\
<div class="mm3_ResultControls">\
<div class="mm3_ResultPricing">\
<div class="mm3_PricingWrap">\
<span class="mm3_PricingTitle">Internet Special:</span>\
<span class="mm3_Price">$' + oVDArray[i].price + '</span><br />\
<span class="mm3_PricingSubtitle">Call (800) 555-1234!</span>\
</div>\
<div class="mm3_ClearDiv"></div>\
</div>\
<div class="mm3_ResultButtonWrapper">\
<a class="mm3_Button01" href="#">\
<span>View Vehicle Details</span>\
</a>\
<div class="mm3_ClearDiv"></div>\
</div>\
<div class="mm3_ClearDiv"></div>\
<div class="mm3_CompareCheckbox">\
<input type="checkbox">\
</div>\
<div class="mm3_ResultButtonWrapper">\
<a class="mm3_Button01" href="#">\
<span>Compare</span>\
</a>\
<div class="mm3_ClearDiv"></div>\
</div>\
</div>\
<div class="mm3_ResultClearDiv"></div>\
</div>\
';

There are similar setups for "tile" and "small" results display. Now I'm on to the text-only display, which is a table. I'm not sure what's going wrong with the following, but FF2 and IE6 produce drastically different (yet both incorrect) results, so something has got to be royally F'd with my code:


var oResultHTML = '\
<tr class="mm3_TextOnlyRow">\
<td class="mm3_TextOnlyColStart"><div>Certified</div></td>\
<td><div>2008</div></td>\
<td><div>Chevrolet</div></td>\
<td><div>Silverado 3500<br />HD DRW Crew Cab</div></td>\
<td><div>$10000</div></td>\
<td><div>123456</div></td>\
<td><div>8</div></td>\
<td><div>Crimson Red</div></td>\
<td>\
<div class="mm3_ResultData">\
<input type="checkbox" />\
<input type="hidden" name="vin" value="CSKKU10408J032189" />\
</div>\
</td>\
</tr>\
';

After those results are pushed into a div being referenced as oResultsContainer, the container then gets this treatment:


oResultsContainer.innerHTML = '\
<table id="mm3_TextOnlyTable">\
<tr id="mm3_TextOnlyHeader">\
<td class="mm3_TextOnlyColStart"><div>Type</div></td>\
<td><div>Year</div></td>\
<td><div>Make</div></td>\
<td><div>Model</div></td>\
<td><div>Price</div></td>\
<td><div>Miles</div></td>\
<td><div>Cyls.</div></td>\
<td><div>Color</div></td>\
<td><div>Compare</div></td>\
</tr>\
' + oResultsContainer.innerHTML; + '\
</table>\
';

Both FF and IE do this last part just fine, and create the table around the results. The problem is with the results markup part.

In FF, when I view the generated source, the <td>'s and <tr>'s from each result are completely absent, leaving only the divs behind. In IE, the first row of the results is messed up, but everything else is fine.

Does anyone know what I'm doing wrong here? I haven't the slightest idea what's causing this problem. :(

[jlizarraga]

Almost forgot the most important part:

http://www.autofusion.com/development/mm3/inventory.html?disp=text

This is the link that will show you the problem.

[jlizarraga]

I thought it might be something to do with the newline characters, so I just tried taking out all the whitespace and newline characters, and got the same result.

[jlizarraga]

Oh I just got an idea - maybe it's because I'm inserting these <tr>'s and <td>'s where there is not yet a containing table! Hm...

[jlizarraga]

Holy crap that was it. +1 brain powerz.

[Twey]

It should be noted that innerHTML is non-standard, inefficient, and has very strange effects in some browsers, especially when used with tables and forms. Additionally, it requires you to embed huge strings of HTML into your code, a practice which is both ugly and difficult to maintain — got to keep track of all those quotes!

The standard DOM methods are greatly preferable, often in combination with a few hidden chunks of markup in your HTML which can be easily cloned and edited.

[jlizarraga]

Thanks for the info. So I should be using appendChild and whatnot to insert results?

I need to finish that DOMScripting book. >_>

[Twey]

Correct. There's a good introduction (and reference) here: http://developer.mozilla.org/en/Gecko_DOM_Reference