Displaying Ajax Responses In The Same Order They Were Sent Out Without Using Synchronous Requests

I'm sending out multiple getJSON requests, and after each request I build out a panel and initialize a 3rd party hierarchical grid with the data. The problem I'm having is that pan

Solution 1:

One simple solution would be to create and append a div to the target div while you're looping, then insert data into each div as the data arrives.

$.each(function () {
    var $thisDiv = $("<div>").appendTo("#targetDiv");
    $.when(doThis,doThat).done(function (result1, result2) {
        $thisDiv.append(result1).append(result2);
    });
});

Though, I would prefer building the html structure beforehand and inserting all at once, just because I prefer to touch the dom as little as possible.