jquery - 在使用 JQuery 重排之前向 DOM 添加多个元素

Question

是否可以向 DOM 添加多个元素，并在所有元素都添加后让浏览器进行一次重排/重绘？我正在听从这个人的建议，但是需要在整个页面的不同位置添加元素。

例如，

<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/