Suspend layout during DOM interaction

Question

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.

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);