Insert, Defer, Prototype and Append elements

This might be a more generic browser/javascript questions than a prototype specific quesiton but i thought it would better to ask here because you all tend to really understand javascript and browsers in a ton of detail. So here goes.

If i execute the following code:

HTML:

Javascript:

$('area').insert({bottom: "<div id="inserted"></div>"});

var count = 0;
var f = function() {
      if ($('inserted') == null) 开发者_开发技巧{
            console.log("not there");
            count++;
            if (count > 50) {
                  $('area'.insert({bottom: "<div id="inserted"></div>"});
                  count = 0;
            }
            f.defer();
      } else {
        console.log("there");
     }
};

f();

Result:

Most of the time it just shows:

there

but some of the time it does this

not there
not there
not there
there

I am assuming because the insert is something that is queued and the browser then inserts the nodes into the DOM in its next event loop. I know that webkit is a single threaded so this makes sense that sometimes its not there and then it gets there, so really i guess i have to wait till its there before i can do the "next thing" on that inserted node. What about firefox and IE? Are they all single threaded in the same way? What happens in Chrome?

Sometimes i see the following happen also which is really concerning to me:

not there
not there
... 50 times
not there
there

It happens every so often on webkit (mac os) and on iPhone webkit and i can reproduce it pretty easily. I have built something simple that will do this but all this seems a little crazy to me because when i look at others code they dont even take this into account. They never way for DOM elements to show up when inserting HTML text into a DOM element.

Any answers/suggestions would be super helpful.

Kiran

---

All of this runs after dom:loaded so the issue is not that dom is not loaded but that sometimes even after it is loaded the content does not always show up. After more looking into this, i found that this seems to occur on the iphone safari browser but not on the desktop versions. It might just be a timing issue. Thanks for taking the time to answer the questions.

---

I guess Fabien's question gets it right: just wait until the DOM is loaded. document.observe("dom:loaded", f);