Suspend layout during DOM interaction

Question

Hi all

In Javascript I'm clearing out the contents of a DIV and then re-populating it, is there any way to suspend layout of these elements or lock the UI until I've finished slashing away at the HTML? I don't want any messages popping up, I just don't want to see the flicker as the items are removed/added.

Thanks Kev

Answer 1

You could build the new element’s content in a DocumentFragment before inserting it into the actual document:

var fragment = document.createDocumentFragment();
// build node in fragment

var div = /* … */; // DIV that should be replaced
div.parentNode.replaceChild(fragment, div);

Answer 2

hide it by adding the style attribute to display:none, do the stuff, then redisplay the div after

Answer 3

only advise could be to update the div content as a whole , by building the entire content html and then add it to the div innerHTML at once, as opposite to add element to the div one by one that is more computational expensive as it involves rebuild the dom tree each time (that easily also cause flickering)

Answer 4

Hi all

I found that by applying a fixed height to the div sorted it, the height wasn't set before so it was growing/shrinking with the content.

Thanks for the answers, oh and Doh!

Kev