javascript - 要素を表示した後のinnerhtmlの設定

Question

要素が表示された後、要素のhtmlを設定しても大丈夫ですか。この場合、ユーザーは目に見える違いを見つけますか？たとえば

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

また、これが不要なブラウザの再描画を引き起こすかどうかを知りたいです。

ありがとう、Gautham

Answer 1

これが役立つかもしれません：フィドル

$('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.

ブラウザ-リフロー-情報の再描画