Wait until previous .append() is complete

Question

How can we make append wait until the previous append is complete. I am appending huge amount of data so the present append should check if the pre

Answer 1

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.

Answer 2

Very simple :)

Using when function.

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

Answer 3

building on the guys answers above i did this in angular:

el.append('<span>random stuff</span>').append('{{randomFunction()}}');

Answer 4

I can give you some hints on how to improve your code.

    for (var i = 0; i < arraycount; i++) {
        $('#fourElementsonly').append('<table border = "1" id = "Portal_User_elements' + i + '" style = " border-collapse:collapse; width:800px; margin:0px; padding:0px; border-color:black"> </table>');
    }

Can become:

   var html = '';  
   for (var i = 0; i < arraycount; i++) {
       html += '<table border = "1" id = "Portal_User_elements' + i + '" class="portalUserElements"> </table>';
    }
    $('#fourElementsonly').append(html);

You will accomplish:

• 999 less jquery selections to '#fourElementsonly'
• less code to be injected if you put in the class "portalUserElements" the styles:
  border-collapse:collapse; width:800px; margin:0px; padding:0px; border-color:black

This means you can also:

   for (var i = 0; i < arraycount; i++) {
        $('#Portal_User_elements' + i).empty(); 
    }

becomes (no for loop!):

   $('.portalUserElements').empty();

And:

for (var i = 0; i < arraycount; i++) {
    $('#Portal_User_elements' + i).append(reports[i]);
}

May become:

$('.portalUserElements').each(
     function(i) {
         $(this).append(reports[i]);
     }
);

Edit: these changes are suggested to improve your algorithm performance, while maintaining the full feature it provides.
You may want to compact everything inside a single string variable (including tables) and append it at the end.
See the articles that Russ Cam suggested you in one of his answers.

Answer 5

Are you appending to different elements or to a single element? If you're appending to a single element, it may be easier to concatenate all of your data and append as one chunk.

Also, where is the data from? If the data is static (non ajax) then you should be able to call

$('selector').append(data1).append(data2).append(data3);

Answer 6

Perhaps another way might have been to simply check whether the length of the innerHTML of the container you're appending to equals the length of the last chunk of content, within your polling function.

If not dont append, if so append.