Wait until previous .append() is complete

A clunky way...

One function (the existing function) handles all of the appends. The code that had followed the appends is wrapped in a new function "kickOffTheRestOfTheProcess".

After all of your initial appends, you add have one final append. It won't get executed until all the others.

$('body')).append("<script>kickOffTheRestOfTheProcess();</script>");

It's worked for me.

Unfortunately, the jQuery append() function does not include a callback. There is no way to really check for completion of it, as it supposedly happens immediately.

See Here for some info on how to use append efficiently. What it pretty much gets at is you can try to get all of your text into one variable and simply use append once.

[update] Since you have all your data in a JSON object from the get go, just do your looping through and put it all in a variable, then just append that once you're finished. [/update]

Very simple :)

Using when function.

$('<div id="appendedItem">Here</div>').appendTo("body");
$.when( $("#appendedItem").length > 0).then(function(){
    console.log( $("#appendedItem").length );
});

Based on the answer from Tim Gard, I found this solution to be very elegant...

$(".selector").append(content).append(function() { /*code goes here to run*/ });