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

Christian Heilmann codepo8 at gmail.com
Fri Apr 7 07:26:34 CDT 2006

> > > 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')
			// table with tbody
			var table2=document.createElement('table');
			var tr2=tr.cloneNode(true);
			var tbody=document.createElement('tbody');

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.

More information about the thelist mailing list