Win a copy of Learn Spring Security (video course) this week in the Spring forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

innerHTML vs. DOM create Elements

 
Daniel Cardenas
Greenhorn
Posts: 10
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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");
cuurTr.appendChild(currTd1);
var currTd2=document.createElement("td");
cuurTr.appendChild(currTd2);
....
mytable.appendChild(currTr);
}
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64613
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
Frank Zammetti
Ranch Hand
Posts: 136
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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).
 
Garrett Smith
Ranch Hand
Posts: 401
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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).
 
Frank Zammetti
Ranch Hand
Posts: 136
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic