DOM Modification speed

[ellisd5]

Hi all,

I'm justing wondering about the behavior of JS in regards to adding elements, suppose I have something like this

<div id="myDiv"></div>
...
function test() {
    for (i=0 i<100; i++) {
        var obj = document.create("div");
        // do stuff to style div and set content
        document.getElementById("myDiv").appendChild(obj);
    }
    // DO SOMETHING WITH ONE OF THESE DIVS
}

I'm just wondering at the point I hit that "// DO SOMETHING WITH ONE OF THESE DIVS", are all the divs I have added in the DOM available to access?

I ask because I have some code at work in which a tester is reporting an error that happens which I can't reproduce, and they and others have had it a few times.

The only way I can explain it in my mind is if the div is not available to me at the time of execution. So I'm just looking to rule it out or confirm my hunch.

Is document.getElementById("myDiv").appendChild(obj); synchronous and the next line of code wont execute until the DOM is ready or is it in fact a asynchronous call and therefore adding alot of elements to the DOM could result in a lag so some divs or not available straight away.

Any information much appreciated, I hope I have been clear enough. I'm using IE7 and so are the testers.

Thanks,
Dale

[rnd me]

appending should stall the loop.

you can use cloneNode(true) to create, which is a lot faster.
also, cache the div instead of calling document.getElementById("myDiv") each time.

myDiv=document.getElementById("myDiv");
//...
myDiv.appendChild(obj);

those two changes will vastly speed the loop execution.