Creating and appending a big DOM with javascript - most optimized way?

Posted by fenderplayer on Stack Overflow See other posts from Stack Overflow or by fenderplayer
Published on 2010-05-20T18:27:13Z Indexed on 2010/05/20 18:30 UTC
Read the original article Hit count: 229

Filed under:
|
|

I use the following code to append a big dom on a mobile browser (webkit):

1. while(someIndex--)  // someIndex ranges from 10 to possibly 1000
2. {
3.   var html01 = ['<div class="test">', someVal,'</div>',
4.                 '<div><p>', someTxt.txt1, someTxt.txt2, '</p></div>',
5.                  // lots of html snippets interspersed with variables
6.                  // on average ~40 to 50 elements in this array
7.                ].join('');
8.   var fragment = document.createDocumentFragment(),
9.   div = fragment.appendChild(document.createElement('div'));
10.  div.appendChild(jQuery(html01)[0]);
11.  jQuery('#screen1').append(fragment);
12. } //end while loop
13. // similarly i create 'html02' till 'html15' to append in other screen divs

Is there a better or faster way to do the above? Do you see any problems with the code? I am a little worried about line 10 where i wrap in jquery and then take it out.

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about dom