javascript 内容を変更してから画面に表示させたい

Question

やりたいこと

現在chromeの拡張機能を作っているのですが、innerHTMLを使うと要素が変更される瞬間が見えてしまい画面がちらついてしまいます。
そこで、画面に表示されたものを後から変更するのではなく、前々から要素を変更して画面に表示させるようなことはできないでしょうか？

Answer 1

前々から要素を変更して画面に表示させる

できないと思います。documentのツリーに加わらないとレイアウトされない、かつツリー内で移動するとレイアウト情報が失われるので。

container.innerHTML前後で container 要素のサイズが変わる場合は、container 以外の要素の場所も変わるためちらつきは避けられません。

サイズが変わらないなら、CSS でサイズを固定してさらに contain: content などのように contain CSSプロパティを指定すればちらつきを避けられるかもしれません。

Comments

[tetro]

ありがとうございます。