innerTextが画面に反映されない時の原因は他の文のせいかもしれない。

innerTextやinnerHtmlで画面の文字を変更させたかったのですが、画面に反映されずどういうことだろうと調べてみました。

状況

console.log()を使って中身を確認すると、確かにinnerTextの中身は変わっているのに画面側には反映されなかった。

let test = document.getElementById("addText").innerText = "hehe";
console.log(test); // hehe

JS上では変わるのに、画面で変わらない。。

結論

innerTextではない部分がおかしかった。

innerTextでは画面に反映することはできないのかと思い、これでダメならあきらめてappendChildを使う書き方に変えてみようと余計なコードを消して、innerTextだけのJSに変えたところ動作を確認できた。

その後改めて他の文を書きなおしたら、正常に動いてしまったため他の構文におかしなことがおきていたらしい。

シンプルなinnerTextサンプル

参考にシンプルなinnerTextのコードです。

あまり使ったことがなかったので、innerTextは取得だけして反映はしないのかといろいろ読み漁りましたが問題なく反映されています。

See the Pen innerText test by Nakamoto (@programmerlife) on CodePen.

おわり

使い馴染みのないapiは簡単にはまってしまいますね。
同じ悩みを持つ方の参考になればと思います。