Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder ellisd5's Avatar
    Join Date
    Jun 2002
    Location
    Uk
    Posts
    160
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Internet Explorer DOM Modification speed

    Hi all,

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

    Code:
    <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
    Dale Ellis
    __________________

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,296
    Thanks
    10
    Thanked 583 Times in 564 Posts
    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.

    Code:
    myDiv=document.getElementById("myDiv");
    //...
    myDiv.appendChild(obj);
    those two changes will vastly speed the loop execution.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •