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/

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

1 个答案: