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

Question

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

1. while(i--)  // 'i' ranges from 10 to possibly 1000
2. {
3.   var html01 = ['<div class="test">', someVal[i],'</div>',
4.                 '<div><p>', someTxt.txt1, anotherVal.val[i], '</p></div>',
5.   // lots of html snippets interspersed with variables that differ in each loop iteration
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.  someArray[someArray.length] = fragment;
12. } //end while loop
13. jQuery('#screen1').append(someArray);
14. // 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.

Seems like you're doing a lot more than you need. Is there a reason you're creating a new fragment for each iteration of the loop? Also, are the elements being appended identical? — user113716
– user113716, Commented May 20, 2010 at 18:51
No, the elements being appended are not identical. Sorry for not making that clear. I just edited my code — Parag
– Parag, Commented May 20, 2010 at 19:48
@patrick, aah yes! i should put all 'html01' in 'someArray' and then append it to the fragment outside the loop, isn't it? — Parag
– Parag, Commented May 20, 2010 at 19:57
Yeah, the purpose of a fragment is to offer a container into which you can append elements without touching the DOM for each append. You only touch the DOM once when you append the fragment. That's what my answer does, only it doesn't give you the unique elements you want. I'll update my answer in a little while. — user113716
– user113716, Commented May 20, 2010 at 20:09
Updated my answer. Will work as long as the variables that populate the text of the elements were correct. Oh, and Fenders rock! Texas Special pickups are about as good as it gets! — user113716
– user113716, Commented May 20, 2010 at 21:18

user113716 · Accepted Answer · 2010-05-22 20:56:58Z

2

UPDATE: Addresses the need to append unique values

I'm no DOM API expert, but this will create the elements you need, clone them in the loop, update their textNode values, append them to the fragment, then append the fragment to the DOM.

It will work as long as the variables you offered for the text nodes are correct.

    // Form a single fragment outside the loop
       var fragment = document.createDocumentFragment();

    // Create the first div and append a textNode
        var div1 = document.createElement('div');
        div1.appendChild( document.createTextNode('content') );
        div1.setAttribute('class','test');

    // Create the second div, its inner p element, and its textNode
        var div2 = document.createElement('div');
        var p = document.createElement('p');
        p.appendChild( document.createTextNode('content') );
        div2.appendChild( p );

    // Variables to store the clones of above
        var clone1, clone2;

    // Counter for while loop
        var i = 1000;

     while(i--)  // someIndex ranges from 10 to possibly 1000
     {
        // Clone the elements we created
        clone1 = div1.cloneNode(true);
        clone2 = div2.cloneNode(true);

        // Update the nodeValue of the first textNode in div1
        clone1.firstChild.nodeValue = 'someVal[i]';

        // Get the p element in div2 and update its nodeValue
        clone2.firstChild.firstChild.nodeValue = 'someTxt.txt1 + anotherVal.val[i]';

        // Append the elements we created, cloned and updated to the fragment
        fragment.appendChild(clone1).
        fragment.appendChild(clone2);
     }

        // Append the populated fragment to #screen1
     document.getElementById('screen1').appendChild(fragment);

EDIT:

If you want to manipulate the completed fragment using jQuery before you append it, you need to do:

$(fragment.childNodes);  // Create a jQuery object of the content of the fragment

as this will not work properly:

$(fragment);   // Doesn't work. jQuery methods will be ineffective.

edited May 22, 2010 at 20:56

answered May 20, 2010 at 19:02

user113716

323k64 gold badges454 silver badges441 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Parag Over a year ago

interesting..you're using all DOM api (compared to array+innerhtml technique what others suggested). I'll test this and let you know. Thanks!

user113716 Over a year ago

Well, the only reason I'm doing that is that it seemed like your concern was performance. Since jQuery is a convenience/compatibility layer on top of the DOM API, it only slows it down. If performance isn't such a concern, then jQuery is a nice way to go.

user113716 Over a year ago

Also, I added an update at the bottom to show how to properly convert your fragment into a jQuery object if needed.

Parag Over a year ago

Thanks, makes sense. Using ppk's timer method, i could see no appreciable difference between your method and array+innerhtml method

Sean Kinsey · Accepted Answer · 2010-05-20 18:43:57Z

1

Why wrap in jQuery at all? I see no gain from this as you could drop it with no additional code needed.

Line 10
From

div.appendChild(jQuery(html01)[0]);

To

div.innerHTML = html01;

Line 13
From

jQuery('#screen1').append(fragment);

To

document.getElementById("screen1").appendChild(fragment);

The gain might not be big, but it will be there. Other than that (and based on the code shown) I don't see any way to make things faster.

answered May 20, 2010 at 18:43

Sean Kinsey

38k7 gold badges55 silver badges71 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related