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

【问题标题】：Adding multiple elements to DOM before reflow with JQuery在使用 JQuery 重排之前向 DOM 添加多个元素
【发布时间】：2013-06-03 01:04:30
【问题描述】：

是否可以向 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"/>);
...

.. 并让浏览器在添加最后一张图片后等待重排/重绘。

【问题讨论】：

标签： jquery dom

【解决方案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/

【讨论】：