在显示元素后设置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