innerHTMLを変更する時は描画ルールとタイミングを考慮しないとはみ出る

<input style="width:100%">なエレメントをinnerHTMLで作成する場合、inputの中身を書き換えるタイミングに注意しないとinputのwidthを100%にしているのに親要素の幅を無視してレイアウトを狂わせてしまう場合があります。

レイアウトが崩れる例と崩れない例のサンプルを作成しました。

以下ソース




実行画面

↑崩れない例

↓崩れた例


innerHTMLを書き換えたfunctionが終了した時点で変更が反映され、レイアウトが決まりますが、その時点でinputのvalueに文字列が入っているとinputはvalueの長さに応じて広げられてしまうようです。

それを回避するためには、レイアウトが決まるまではvalueはカラにしておき、setTimeoutによって時間差でvalueを代入するか、最初からinnerHTMLを使わずにcreateElementなどを使えば良いようです。