...

View Full Version : DOM Modification speed



ellisd5
11-12-2010, 03:14 PM
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
11-12-2010, 10:17 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum