innerHTML,textContent-JavaScript入門JavaScript入門innerHTML,textContent更新日:2019.07.29HOMEJavaScript入門innerHTML,textContentここでは、既に読み込まれたテキストを書き換える方法について解説します。前のページで現在時刻を1秒ずつ表示していたのも、このページで扱う機能を使って実現しています。テキストの書き換えではHTMLのBody内に以下のタグとスクリプトを書き込んでみてください。id="str">このタグの中身を書き換えます。}}</script><サンプル>このタグの中身を書き換えます。スクリプトの説明HTML部分フォームでは2つのボタンを設置しています。onclickイベントで、関数reWrtie()を呼び出します。HTMLタグを含めた書き換えのために分岐させるためです。divタグにはid属性を付けています。id名は「str」にしました。document.getElementByIdが使えるか確認しています。古いブラウザでは対応していないことがあるので、エラー回避のために必要な処置です。次にif文~else文で引数を確認します。他の数値ならHTMLタグも含めた書き換えになります。テキストの書き換え部分です。そのあとにtextContentもしくはinnerHTMLを続けます。書き換えるテキストを代入します。=id名の付いたタグのテキストを書き換えます。書き換える文字列がテキストのみの場合に使用。=id名の付いたタグのテキストを書き換えます。書き換える文字列にHTMLタグを含めることができます。innnerHTMLは様々な用途があると思います。ゲームのようなWebアプリケーションにも用いることができます。innerHTMLで書き込んでいます。数独リベンジでもクリックしたセルにラジオボタンの数字をinnerHTMLで書き込んでいます。document.getElementById()を省略する実際にdocument.getElementById()と書くと長いので、沢山でてくると面倒になります。そこで、同じid名のものがある時は、以下のように省略して記すとよいでしょう。このように変数に代入してしまうことによって、簡略化することができます。今回はHTMLタグを含むテキストの書き換えについて見ました。次のページでは画像を切り替える方法について考えます。