Method for Dynamically populating tables

[blueapricot416]

I am on a team designing the front end of an Intranet application. The
backend guys will be using JSP and AJAX-like functionality to make
server requests that must dynamically change elements on a page.

What is the best way to create and populate tables, which will exist in
floating DIVs (with drag and drop capability)? It only has to work
with IE6.

I know of two ways:

1. Dynamically making the tables using "createElement('<table>')",
"insertRow()", etc.

2. Using innerHTML in the holding DIV, to generate table code inside.

3. Is there another way?

What are the pros and cons of #1 and #2? In terms of speed (some of
these tables are huge)? #2 seems easier to wrap my head around, but
maybe less efficient?

Thanks for any insights,
blueapricot416

 

[sam.partington]

I know of two ways:
1. Dynamically making the tables using "createElement('<table>')",
"insertRow()", etc.

2. Using innerHTML in the holding DIV, to generate table code inside.

quirksmode.org has an excellent article on the subject with performance
comparisons [1]

The short version is that generally the quickest way is to build up an
array of lines, and join them together and assign that to innerHTML.
But I recommend you read the article.

Sam

[1] http://www.quirksmode.org/dom/innerhtml.html

 

[blueapricot416]

Wow, great article. Thank you, Sam.

InnerHTML seems to be the way to go. That said, why does Microsoft
recommend you do _NOT_ use innerHTML for generating tables?

Specifically:

"Note When using Dynamic HTML (DHTML) to create a document, you can
create objects and set the innerText or innerHTML property of the
object. However, because of the specific structure required by tables,
the innerText and innerHTML properties of the table and tr objects are
read-only." (See
http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/innerhtml.asp
for more info.)

It says there that innerHTML is "readonly" for "TABLE, TBODY, TFOOT,
THEAD, and TR" (among other things). Yet, I can generate/write tables
rapidly using innerHTML, creating <TABLEs> and <TRs> galore without a
hitch?

Why does Microsoft recommend _NOT_ using innerHTML for generating
tables, and why do they say some TABLE objects are readonly when they
clearly can be written?

Is there something I am missing?

Thanks,
blueapricot416

 

[RobG]

Wow, great article. Thank you, Sam.

InnerHTML seems to be the way to go. That said, why does Microsoft
recommend you do _NOT_ use innerHTML for generating tables?

I guess it's to do with how IE parses HTML and converts it to a DOM - but
that's just guessing. The fact is that modifying a table's innerHTML
doesn't always work in IE.

innerHTML is a proprietary Microsoft feature that has been widely copied in
other browsers. It has no published standard and implementations differ,
so it's not always reliable. For you it may be more efficient to replace
an entire table rather than just the contents of a row or cell, so
innerHTML may well be the go.

[...]

 

[blueapricot416]

Hey Rob,
are you saying it is ONLY problematic using innerHTML in IE when you
are modifying table objects (TRs, etc.), and when you build a new table
from the ground up (starting with <TABLE>) then innerHTML is not
problematic?

I am having trouble understanding these (seemingly) contradictory
quotes of yours:

1.> The fact is that modifying a table's innerHTML doesn't always work
in IE.

2.> ...it may be more efficient to replace an entire table rather than
just the contents... so innerHTML may well be the go.

I am pretty sure you mean in IE replacing the entire table using
innerHTML is safe, but I want to make sure.

(It is so much faster using it this way instead of DOMs way, I would
prefer to use it, but want to make sure it won't be buggy with massive
tables.)

Thanks,
blueapricot416

 

[RobG]

Hey Rob,
are you saying it is ONLY problematic using innerHTML in IE when you
are modifying table objects (TRs, etc.), and when you build a new table
from the ground up (starting with <TABLE>) then innerHTML is not
problematic?

Yes - but see below.

I am having trouble understanding these (seemingly) contradictory
quotes of yours:

1.> The fact is that modifying a table's innerHTML doesn't always work
in IE.

I guess to be strictly correct the innerHTML property may be changed as
directed by the script, however the browser may not be able to display
the result.

2.> ...it may be more efficient to replace an entire table rather than
just the contents... so innerHTML may well be the go.

Not contradictory, just explanatory. Modifying part of the table is
likely to fail, but replacing the entire table (or the contents of a
cell) is reliable as far as I know.

I am pretty sure you mean in IE replacing the entire table using
innerHTML is safe, but I want to make sure.

Yes - for some unknown value of 'safe' that will only be revealed by
thorough testing.

(It is so much faster using it this way instead of DOMs way, I would
prefer to use it, but want to make sure it won't be buggy with massive
tables.)

Replacing a 'massive table' in its entirety may be slow anyway, only
testing in your situation will reveal the best method if speed of
processing is the criterion.

The tests by Peter-Paul at Quirksmode do not include download times.
DOM scripting *might* be much more efficient in that regard as all the
HTML can be omitted and you may be able to calculate some of the content
(but that might work for client-side generated HTML too...). Only you
can tell whether that will make up for the slower performance (and IE is
*such* a slug with DOM methods).

As for future support, Microsoft is renowned for never dropping support
for 'legacy' stuff, so even if they adopt some replacement for innerHTML
they won't drop support. If there is ever a serious move to XML I don't
expect MS to come up with 'innerXML', hopefully they'll use the W3C Load
& Save. Having said that, Firefox seems to support innerHTML in XHTML
documents even when served as XML mime-type.

<URL:https://bugzilla.mozilla.org/show_bug.cgi?id=155723>


I think it will remain as a sort of late addition to DOM 0. Here's a
recently updated working paper by Ian Hickson that may be of interest:

"Web Applications 1.0 Working Draft — 8 March 2006"
<URL:http://www.whatwg.org/specs/web-apps/current-work/>

A (somewhat dated) "he said/she said" article on innerHTML & DOM:
<URL:http://www.developer-x.com/content/innerhtml/default.html>

 

[Randy Webb]

(e-mail address removed) said the following on 3/9/2006 12:14 PM:

I am on a team designing the front end of an Intranet application. The
backend guys will be using JSP and AJAX-like functionality to make
server requests that must dynamically change elements on a page.

What is the best way to create and populate tables, which will exist in
floating DIVs (with drag and drop capability)? It only has to work
with IE6.

I know of two ways:

1. Dynamically making the tables using "createElement('<table>')",
"insertRow()", etc.

2. Using innerHTML in the holding DIV, to generate table code inside.

3. Is there another way?
<URL:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/tables/BuildTables.asp

There is another one that I can't find the URL to that shows some speed
tests comparing TOM/DOM and innerHTML.

What are the pros and cons of #1 and #2? In terms of speed (some of
these tables are huge)? #2 seems easier to wrap my head around, but
maybe less efficient?

It is major-ly less efficient using innerHTML

 

[sam.partington]

The tests by Peter-Paul at Quirksmode do not include download times.
DOM scripting *might* be much more efficient in that regard as all the
HTML can be omitted and you may be able to calculate some of the content
(but that might work for client-side generated HTML too...). Only you
can tell whether that will make up for the slower performance (and IE is
*such* a slug with DOM methods).

I guess that could be the case, and of course you have to choose whats
the right tool for the job in each situation. But I generally find dom
methods a lot heavier in code than innerHTML. Take a simple example :

var a = document.createElement('a');
var text = document.createTextNode('my link');
a.appendChild(text);
a.href = 'whatever.html';
a.title = 'Click this to do something';
myid.appendChild(a);

compared to

myid.innerHTML += "<a href='whatever.html' title='Click This to do
something'>my link</a>";

The latter is a lot lighter in download terms. (198 bytes compared to
93 bytes)/

But I find the DOM method a lot easier when you need to add events to
the element, so I tend to use a combination of both - DOM when I need
to add events, and innerHTML when there is a lot of elements to
generate.

As always its a tradeoff - choosing the right tool for the job is what
developing software is all about.

Sam

 

[blueapricot416]

Thanks for all of the responses.

So there are three ways to build tables dynamically for IE:

1. DOM method
2. innerHTML
3. Microsoft's proprietary TOM (Table Object Model)

I thought there was a third! I have done a few tests of 1 and 2, and
looked at online resources comparing the two, and for IE, innerHTML
does blow the DOM out of the water in terms of speed.

But now I have to look at this third one, TOM, which Mr.Webb says is
more efficient than innerHTML.

I am going to do my own tests, of course (some of these dynamic tables
will be hundreds of rows deep -- maybe thousands), but any links to
relevant tests/articles are appreciated.

Thanks so much for the insights, folks.

Sincerely,
blueapricot416

 

[mscode3]

There is, as I'm sure most know, a known issue with IE and innerHTML in
table elements. Generally, trying to set the innerHTML of a <tr> or
<td> tag does not work in IE. However, there is a simple work-arround.
build the table with <div> tags inside each <td> tag and update the
innerHTML of the <div>.

I have an application where I'm creating a property sheet-like table
for various objects and I use this technique to modify the elements in
the property sheet. Also, I first create the table so it is long enough
for the object with the most properties and then hide/show the rows I
need by setting the <tr> tags' style's display value to "none"
innitally and then making the ones I need visible. NOTE: IE wants you
to make them visible by setting display to "block" and Gecko-based
browsers and Opera want it to be set to "table-row".

 

[Dr John Stockton]

JRS: In article <[email protected]>
, dated Thu, 9 Mar 2006 09:14:44 remote, seen in

What is the best way to create and populate tables, which will exist in
floating DIVs (with drag and drop capability)? It only has to work
with IE6.

The latter condition is not necessarily a good idea. If the
organisation's IT people have forced all staff on to IE6, they may well
want to force IE7 in the foreseeable future (defined as the length of
time for which you might wish to be employed there). So IMHO you should
at least be aiming for IE6 and direct successors.

It may mot make any difference for your coding; but it would be prudent
to watch out for the possibility.

 

[RobG]

mscode3 wrote:
[...]
NOTE: IE wants you

to make them visible by setting display to "block" and Gecko-based
browsers and Opera want it to be set to "table-row".

Which is why it is recommended to toggle the display property between
'none' and '' (empty string) so that the element can return to its default
state (which might be block or table-row as appropriate in this case).

 

[RobG]

Thanks for all of the responses.

So there are three ways to build tables dynamically for IE:

1. DOM method

I guess you are talking about using the generic HTMLElement interface
methods like createElement and appendChild. The Quirksmode reference
provided earlier calls these DOM 1 methods (even though the HTMLTable
interface noted below was introduced with DOM 1 too).

2. innerHTML
3. Microsoft's proprietary TOM (Table Object Model)

The link Randy provided shows Microsoft's implimentation of the W3C
HTMLTableElement interface, which is not proprietary. Follow the links for
each of the interface methods and you will find links to the W3C specification.

These are called 'W3C table methods' by the Quirksmode reference.

Here's the Gecko reference:

I thought there was a third!

If you count the element and table interfaces as two, then the clone
method, there are 3 methods just with DOM.

I have done a few tests of 1 and 2, and
looked at online resources comparing the two, and for IE, innerHTML
does blow the DOM out of the water in terms of speed.

But now I have to look at this third one, TOM, which Mr.Webb says is
more efficient than innerHTML.

Not according to Quirksmode.

I am going to do my own tests, of course (some of these dynamic tables
will be hundreds of rows deep -- maybe thousands), but any links to
relevant tests/articles are appreciated.

Remember that there are other factors involved - make sure you include
download and display times, not just raw conversion to DOM objects. Maybe
you should be letting users download a spreadsheet or PDF instead.

 

[Randy Webb]

Randy Webb said the following on 3/10/2006 4:25 AM:

(e-mail address removed) said the following on 3/9/2006 12:14 PM:

There is another one that I can't find the URL to that shows some speed
tests comparing TOM/DOM and innerHTML.

This is the one I couldn't find, that I knew I had:

<URL:
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dndude/html/dude100499.asp
It covers a lot of speed increases in creating tables, which is what you
were asking about.

 

[Randy Webb]

(e-mail address removed) said the following on 3/10/2006 10:18 AM:

Thanks for all of the responses.

So there are three ways to build tables dynamically for IE:

1. DOM method
2. innerHTML
3. Microsoft's proprietary TOM (Table Object Model)

I thought there was a third! I have done a few tests of 1 and 2, and
looked at online resources comparing the two, and for IE, innerHTML
does blow the DOM out of the water in terms of speed.

But now I have to look at this third one, TOM, which Mr.Webb says is
more efficient than innerHTML.

It is, and it beats the innerHTML as well.

<URL:
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dndude/html/dude100499.asp
It even has a link to the results:

<URL: http://msdn.microsoft.com/library/en-us/dndude/html/results2.asp >

 

[Thomas 'PointedEars' Lahn]

(e-mail address removed) said the following on 3/10/2006 10:18 AM:

1. DOM method
2. innerHTML
3. Microsoft's proprietary TOM (Table Object Model)
[...]
But now I have to look at this third one, TOM, which Mr.Webb says is
more efficient than innerHTML.

It is, and it beats the innerHTML as well.

Maybe in IE, but, very surprising to me, not in my Firefox 1.5.0.1/Linux.
For creating tables, according to Quirksmode, `innerHTML' with string
concatenation beats all other methods here. In 5 out of 5 cases.


PointedEars

 

[mscode3]

Rob,

Quite correct, which is the way that I handle it. I left it as an
"exercise for the read" and didn't specify how to solve the problem. I
guess I was a professor for too long.

 

[Randy Webb]

Thomas 'PointedEars' Lahn said the following on 3/11/2006 10:33 AM:

(e-mail address removed) said the following on 3/10/2006 10:18 AM:

1. DOM method
2. innerHTML
3. Microsoft's proprietary TOM (Table Object Model)
[...]
But now I have to look at this third one, TOM, which Mr.Webb says is
more efficient than innerHTML.

It is, and it beats the innerHTML as well.

Maybe in IE, but, very surprising to me, not in my Firefox 1.5.0.1/Linux.

How does your Firefox implement Microsofts Table Object Model?

 

[RobG]

Thomas 'PointedEars' Lahn said the following on 3/11/2006 10:33 AM:

(e-mail address removed) said the following on 3/10/2006 10:18 AM:

1. DOM method
2. innerHTML
3. Microsoft's proprietary TOM (Table Object Model)
[...]
But now I have to look at this third one, TOM, which Mr.Webb says is
more efficient than innerHTML.

It is, and it beats the innerHTML as well.

Maybe in IE, but, very surprising to me, not in my Firefox 1.5.0.1/Linux.

How does your Firefox implement Microsofts Table Object Model?

Microsoft's "Table Object Model" is their implementation of the W3C
Interface HTMLTableElement. All of the methods listed - insertRow,
insertCell, createTHead, etc. are here:

<URL:http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-64060425>


Running the Quirksmode tests shows them to be slower in Firefox than the
generic element interface methods like createElement, appendChild, etc.

Why Microsoft chose to discuss "Table Object Model vs. the DOM" is a
mystery and gives the impression that it is not part of the DOM or that
it is some competing system.