refresh html while dynamically adding elements

Question

I've got a bit of javascript that dynamically adds elements to my page. The problem is that there are hundreds of elements to create on any given run, and although it takes less than a second to load a single element, the whole page may take 30 seconds or more to load completely, then everything suddenly springs up onto the page. My question is: how can I update the page so that my dynamically created element will be displayed as soon as it is created?

       var newDiv = document.createElement('div');

       for (var val in array) {
            var newCanvas = document.createElement('div');
            newCanvas.className = "graph";
            newDiv.appendChild(newCanvas);

            drawGraph(val, newCanvas);  //adds a bunch of elements to newCanvas
            addTitle(val, newCanvas);          //adds another
            addDescription(val, newCanvas);    //adds another
       }

       document.body.appendChild(newDiv);

Can we see some code? Sounds like you are not adding each element individually to the dom or have it hidden until a certain time. — fanfavorite
– fanfavorite, Commented Jun 22, 2012 at 20:55
Please Post some code or a JSFiddle so we can see how your code is working — Barkermn01
– Barkermn01, Commented Jun 22, 2012 at 20:58
Dynamically adding elements to the DOM one at a time is a very bad idea. Every time you add a visible element to the DOM you force a reflow of the entire DOM tree which reduces performance. Batch your changes. — natlee75
– natlee75, Commented Jun 22, 2012 at 21:13

natlee75 · Accepted Answer · 2012-06-22 21:31:03Z

3

It is extremely inefficient to dynamically add hundreds of elements to the DOM one at a time. Every time you add a single visible element to the DOM you force a reflow of the entire DOM tree which is followed by a repaint to the screen.

You should use JavaScript to create a DOM fragment (e.g. a div element) to which you can append new DOM elements. Once you have all of the new elements you can wholesale add them all by transferring the children of that fragment to the containing DOM element in the live DOM tree.

The following is an example of a function that creates a DOM element with a set of specified attributes and optional child elements. After an element and its children are assigned to the variable myDiv that element is appended to the document's body.

function dom(tag, attributes) {
    var el, key, children, child;
    el = document.createElement(tag);
    for (key in attributes) {
        if (attributes.hasOwnProperty(key)) {
            el[key] = attributes[key];
        }
    }
    for (i = 2, l = arguments.length; i < l; i++) {
        child = arguments[i];
        if (child.nodeType == 1 || child.nodeType == 3) {
            el.appendChild(child);
        }
    }
    return el;
}

var myDiv = dom(
    'div',
    { id: 'myDiv', className: 'container' },
    dom(
        'p',
        { className: 'firstParagraph' },
        document.createTextNode('If you enjoy this movie, '),
        dom(
            'a',
            { href: 'http://www.amazon.com', title: 'Buy this movie at Amazon.com!' },
            document.createTextNode('buy it at Amazon.com')
        ),
        document.createTextNode('!')
    ),
    dom(
        'p',
        {},
        document.createTextNode('The quick brown fox jumps over the lazy dog.')
    )
);

document.body.appendChild(myDiv);

answered Jun 22, 2012 at 21:31

natlee75

5,2273 gold badges37 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1429419 Over a year ago

Posted some code. You were right, this cut loading time by a factor of 10! But it still looks sloppy when the page takes 5 seconds to load and then draws everything all at once. Is there a way to first draw the primary elements (the ones onto which I will draw graphs) and then draw to each of these divs one at a time without the whole page redrawing? Thanks a ton!

Akhi · Accepted Answer · 2012-06-22 21:06:30Z

0

Put all the element loading after the DOM is constructed.

i.e use

$(document).ready(function(){
     // induvidual elements loadings
});

The $ sign denotes Jquery. For using jquery, add the script block.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

This way the basic structure will load completely and individual parts may take its own time.

edited Jun 22, 2012 at 21:06

answered Jun 22, 2012 at 20:58

Akhi

2,25218 silver badges25 bronze badges

1 Comment

Barkermn01 Over a year ago

jQuery has never been mesioned mate you might want to tell him that your method requires jQuery...

Collectives™ on Stack Overflow

refresh html while dynamically adding elements

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related