Why does wrapping large groups of elements before insertion increase performance?

Why does wrapping large groups of elements before insertion increase performance?

JSFiddle example

What I'm interested in is an explanation of why the Third Method completes in less than half the time as the Second Method, when the only difference between the two is that, in the Third Method, there's a div element wrapped around the string that contains the 1000 divs to insert. I've seen this tip mentioned all over the place, but I have yet to see a reason WHY using a wrapper is faster.

  1. var arrLen = 1000; 
  2. var arr = [arrLen]; 
  3. for(var i=0; i<arrLen; i++) { 
  4. arr[i] = i; 
  5. } 


Second Method: Inserting Once Using String 
  1. var appendString = ""; 
  2. $.each(arr, function() { 
  3. appendString += "<div>" + this + "</div>"; 
  4. }); 
  5. $('#parent').append(appendString); 
Completion Time: 10ms 


Third Method: Inserting With Wrapping Element 
  1. var appendString = ""; 
  2. $.each(arr, function() { 
  3. appendString += "<div>" + this + "</div>"; 
  4. }); 
  5. $('#parent').append('<div>' + appendString + '</div>'); 
Completion Time: 4ms
Thanks