在顯示元素後設置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