• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

innerHTML vs. DOM create Elements

 
Greenhorn
Posts: 10
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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);
}

 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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.
 
Ranch Hand
Posts: 136
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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).
 
Ranch Hand
Posts: 401
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
    Number of slices to send:
    Optional 'thank-you' note:
  • 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
 
Don't get me started about those stupid light bulbs.
reply
    Bookmark Topic Watch Topic
  • New Topic