在使用JQuery回流之前向DOM添加多个元素

Question

是否可以将多个元素添加到DOM中，并在添加完所有元素后让浏览器执行一次回流/重绘？我使用的是这个人的advice，但是需要在整个页面中的不同位置添加元素。

例如,

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

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

   ...
</div>

我希望能够做这样的事情：

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

。。并且在添加最后一个图像之后使浏览器等待回流/重绘。

Answer 1

将父元素的克隆拖入内存，对其进行修改，然后使用.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/