Creating and appending a big DOM with javascript - most optimized way?
- by fenderplayer
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.
