[thelist] innerHTML on a table (Was: AJAX Tip)

[Christian Heilmann]

> > > In case someone reading the above thought of doing some innerHTML in
> > > tables:
> You don't need to use innerHTML at all - just traverse the dom and find the
> right node and append(node.appendChild(newnode)) it - this works in IE as
> well as firefox.
> look here:
> http://developer.mozilla.org/en/docs/Gecko_DOM_Reference
> tables have their own little section
> http://developer.mozilla.org/en/docs/DOM:table#HTML_Form_Element_Interface

Yes, we know, however that is not the issue. The problem is that MSIE
does not show a table generated with DOM unless you also have a TBODY
in it.

<tip type="JavaScript and DOM" author="Chris Heilmann">
If you use createElement and appendChild to create tables in
JavaScript always make sure to use a tbody in the table.

		function dotables(){
			// table without tbody
			var table=document.createElement('table');
			var tr=document.createElement('tr');
			var td=document.createElement('td')
			td.appendChild(document.createTextNode('foo'));
			tr.appendChild(td);
			table.appendChild(tr);
			document.body.appendChild(table);
			// table with tbody
			var table2=document.createElement('table');
			var tr2=tr.cloneNode(true);
			var tbody=document.createElement('tbody');
			tbody.appendChild(tr2);
			table2.appendChild(tbody);
			document.body.appendChild(table2);
		}
		window.onload=dotables;

This will result in two tables in Firefox, but only one in MSIE, as
the first one lacks a tbody.
The table is inside the document, it is just not rendered!

Proof: http://icant.co.uk/sandbox/createTables.html

With thanks to Pavel Dudrenov and Alex Robinson.
</tip>