在显示元素后设置innerhtml

Question

在显示元素后设置元素的html是否可以。在这种情况下，用户是否会发现任何明显的差异。对于例如。

$("#abc").show();
$("#abc").append("<div>Test div</div>");

此外，我想知道这是否会导致不必要的浏览器重绘。

谢谢， Gautham

Answer 1

可能会有所帮助：fiddle

$('button').click(function () {
   console.log('Height is ' + $("#abc").height() + ' before show.');
   $("#abc").show();
   console.log('Height is ' + $("#abc").height() + ' after show.');
   $("#abc").append("<div>Test div</div>");
   console.log('Height is ' + $("#abc").height() + ' after filling.');
});

输出：

Height is 0 before show.
Height is 0 after show.
Height is 20 after filling.

browser-reflows-repaint for info