JSON to DOM or innerHTML?

Go To StackoverFlow.com


I have this code:

try {
    var _o, _l, i, _d = new Array(), _c;
    _o = JSON.Parse( Request.Response );
    for ( i = 0, _l = _o.length; i < _l; i++ ) {
        _d[ i ] = document.createElement('div');
        _c = document.getElementById('comentsContainer');
        _c.removeChild( _c.firstChild );
        _d[ i ].className = 'comment-user';
        _c.appendChild( _d [i] );
catch ( w ) {
    console.log( w );

The question is, is it better this way or should I use innerHTML ?

ADD: the object to parse :

"comments" : [
  { "user" : "foo", "comment" : "foo", "date" : "foo/foo/bar", "id_comment" : "bar" },
  { /* the same as above x10 */ }

Note that I want to parse each object from each array to a DOM element

2012-04-04 06:06
by NoName
this way is bette - noob 2012-04-04 06:09
I believe innerHTML is mostly the faster option, not to mention it requires a lot less code - powerbuoy 2012-04-04 06:11


Since you already have a structural representation of the data here (rather than raw HTML to parse), I'd say that your approach (using DOM manipulation methods) makes more sense than using an approach built around .innerHTML. In some cases, .innerHTML has shown to be a performance win, but I'm not sure that's a case on modern browsers with decent JavaScript engines. Furthermore, a lot of the gain you might get from dropping a blob of HTML into the innerHTML property is that you have to build that HTML from your JSON representation anyway, which will also take time. Since you have to process the JSON object, using the DOM manipulation methods is a sensible design approach.

2012-04-04 06:21
by Jason LeBrun
So... what is your preference - NoName 2012-04-04 06:24
With the information provided in your question, I think the approach that you're taking is fine. A few unrelated comments: using more descriptive variable names will be helpful for you (and possibly others) down the road. Use d = [] to create a new Array, rather than the outdated new Array() approach. Consider moving the DOM creation methods to create a comment block into a separate function with a descriptive name, to encourage code reuse. Of course, I don't know the whole context of the code snippets, so the comments might not be so useful - Jason LeBrun 2012-04-04 06:27
Thanks a lot, friend, I will do. But this way not consume many processes - NoName 2012-04-04 06:31


I would say that DOM manipulation is a cleaner approach: innerHTML is a bit spaghetti code, where you mix the markup language with behavior (JavaScript), and you don't have a clear structure at the end. In addition, in most of the modern browsers DOM API are faster or equivalent to innerHTML in term of performance – unfortunately IE and Opera are not the case:


So, go for the DOM APIs, maybe you could clean and optimize a bit your code (e.g. you don't need to execute getElementById every loop to get the commentsContainer reference, you can have it outside; also not sure why you remove the first child every time you add a comment, seems to me that you could likely remove the comment you added previously, in that case can be optimized as well).

2012-04-04 06:35
by ZER0
Thanks, this very useful for m - NoName 2012-04-04 06:49
-1, It doesn't matter whether you use .innerHTML or DOM methods in the slightest bit, both methods require you to contain the markup data mixed with code. DOM code of course generally being much harder to maintain and write - Esailija 2012-04-04 18:56
That's no true. Using DOM API you have a clear separation between DOM element and operation you perform on that element. Using innerHTML you have just string. DOM APIs gives to you a nicer and cleaner separation because you have objects for each HTML elements you're going to create/add/modify. Using innerHTML you have a string that can contains everything. That's why to me is spaghetti code - ZER0 2012-04-04 21:01