How can you get your code to wait for html() and append() functions to complete?

Question

I'm setting the html of the body element in an iframe to a string str, then I want to access that content on the next line (here just using an alert call to display the content) but the html and append functions haven't completed by the time the alert statement is called.

$(function(){
....
$("#notes-tab span.add_draft").bind("click", function(e){
    var str = '';
    $(this).parent().siblings(".tab-content").children(".para").each(function(ind) {
        str += $(this).find('div:first').html();
    });
    var curr = $("#content_rte").contents().find("body").html();
    if (curr == ' ' || curr == '<br>') {
        $("#content_rte").contents().find("body").html(str);
    }
    else {
        $("#content_rte").contents().find("body").append(str);
    }
    alert($("#content_rte").contents().find("body").html());
});
});

And of course neither the html nor the append functions take callbacks.

Could someone tell me how one normally accomplishes waiting for the DOM to be changed before proceeding?

Answer 1

If you are using jQuery you can rely on .closest() to figure out if the element you just created has a parent body tag, and if it does it means it's been added to the DOM. You can write a function such as the following to allow you to actually do something when your element is ready:

callWhenReady: function (selector, callback, scope) {
    var self = this;
    if ($(selector).closest('body').length) {
        callback.call(scope);
    } else {
        setTimeout(function () {
            self.callWhenReady(selector, callback, scope);
        }, 1);
    }
}

Answer 2

html and append both call domManip, which is a synchronous method, so alert shouldn't even execute until those calls have completed.

Are you sure that the values you expect are being copied into the locations you expect?