Adding multiple elements to DOM before reflow with JQuery

Question

Is it possible to add multiple elements to the DOM, and have the browser do a single reflow/repaint after they're all added? I'm following this guy's advice, but the elements need to be added at various places throughout the page.

For example,

<div>
 <div id="A">
 <p>stuff...</p>
 </div>
 <div id="B">
 <p>stuff...</p>
 </div>
 ...
</div>

I'd like to be able to do something like this:

$("#A").append('<img src="a.png"/>);
$("#B").append('<img src="b.png"/>);
...

.. and have the browser wait to reflow/repaint after the last image is added.

Answer 1

Pull a clone of the parent element into memory, alter it, and write it all back out at once using .replaceWith():

$p = $('#A').parent(); // or select it any way you like
$pc = $p.clone();
$pc.find('#A').append('<img src="a.png"/>');
$pc.find('#B').append('<img src="b.png"/>');
$p.replaceWith($pc);

http://jsfiddle.net/mblase75/fSnLb/