Render Speed: Adding One Dom Item At A Time Or Adding Set Of Items At Once

Currently when I receive results from search I loop through results and append it to a list (I guess this causes browser to re-render page every time item is added - is there a way

Solution 1:

What I would do is use document.createDocumentFragment() and do all possible operations there, and touch the real DOM once. (Beside in a loop might be a good idea to cache the selector once):

var frag = document.createDocumentFragment();
$.each(results, function(key, val){
    var a = document.createElement("div");
    a.innerHTML = val;
    frag.appendChild(a);
});
$(".results").append(frag);