innerTextやinnerHtmlで画面の文字を変更させたかったのですが、画面に反映されずどういうことだろうと調べてみました。
Contents
状況
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は簡単にはまってしまいますね。
同じ悩みを持つ方の参考になればと思います。
