File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
The moose likes HTML, CSS and JavaScript and the fly likes innerHTML vs. DOM create Elements Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "innerHTML vs. DOM create Elements" Watch "innerHTML vs. DOM create Elements" New topic

innerHTML vs. DOM create Elements

Daniel Cardenas

Joined: Jul 26, 2005
Posts: 10
Which solution is better to show a table?
I'have two.

1. First solution

2. Second solution
var mytable=document.createElement("table");
var json="..."; // array of myelements in json format

for(var i=0; i<json.myelements.length; i++){

var currTr=document.createElement("tr");
var currTd1=document.createElement("td");
var currTd2=document.createElement("td");
Bear Bibeault
Author and ninkuma

Joined: Jan 10, 2002
Posts: 63866

You may come across purists who think that one method or the other is always superior, but I use both techniques, choosing whichever I feel which is more appropriate for the task at hand. I detest building up markup in strings, so for something as complex as a table structure, I'd most defininetly go the DOM route.

The exception would be if the table structure were already created for me on the server by something like a JSP... then I'd just use innerHTML (or Prototype's Ajax.Updater) to handle it.

[Asking smart questions] [About Bear] [Books by Bear]
Frank Zammetti
Ranch Hand

Joined: Dec 16, 2004
Posts: 136
Keep in mind though that at least some browsers, some versions perhaps, won't insert elements into the DOM if you simply do innerHTML... so, inserting a table that way would mean you can't later address the individual elements. I'm frankly not sure what the cutoff point is where that's not an issue any more, it may well be further back than I thought it was... I do know that I've been burned a few times by it though (although I can't remember the last time, so it could have been a while ago).

-- <br />Frank W. Zammetti<br />Founder and Chief Software Architect<br />Omnytex Technologies<br /><a href="" target="_blank" rel="nofollow"></a><br />AIM/Yahoo: fzammetti<br />MSN:<br />Author of "Practical Ajax Projects With Java Technology"<br /> (2006, Apress, ISBN 1-59059-695-1)<br />and "JavaScript, DOM Scripting and Ajax Projects"<br /> (2007, Apress, ISBN 1-59059-816-4)<br />Java Web Parts - <a href="" target="_blank" rel="nofollow"></a><br /> Supplying the wheel, so you don't have to reinvent it!
Garrett Smith
Ranch Hand

Joined: Jun 27, 2002
Posts: 401
Frank, which browser are you talking about? I don't know any browser that does that behavior you described.

innerHTML is faster and usually easier.

Both examples are missing a TBODY. <TR> must be in a table-row-group (THEAD, TFOOT, TBODY).

comp.lang.javascript FAQ:
Frank Zammetti
Ranch Hand

Joined: Dec 16, 2004
Posts: 136
I just did the following test in IE6, IE7, FF 1.5 and FF 2.0, all Windows versions:

(FYI, altered to get it through the post filters, it won't work as shown)

Indeed, it worked as expected, the new div got added to the DOM because the alert worked. So, while I know for sure this caution used to be valid, it certainly would appear to no longer be, at least as far as the major browsers on the major OS goes. Cool with me
I agree. Here's the link:
subject: innerHTML vs. DOM create Elements
It's not a secret anymore!