こんにちは朱夏です。
今回はJavaScriptを使って、ページにテキストや要素を表示する方法を解説します。
HTMLで表示されたページの内容に、後からJavaScriptでテキストや要素を追加するイメージです。
ん？
最初からHTMLに書いておけばいいんじゃないの？
私の様にこんな風に考えている人もいるかもですが、JavaScriptでテキストや要素を表示することで得られるメリットがあるのです。
一般的に使われる具体例としては、「続きを読む」ボタンなどでしょうか。
捜査結果に応じた表示内容や繰り返し使う内容などは、以前学習で作った数当てゲームで活躍していました。
今回は初心者向けに基本的な表示方法を解説していきたいと思います。
それではいってみましょう。
[もくじ]
3つの追加方法
1つ目：document.write();を使う方法
2つ目：innerHTMLを使う方法
3つ目：textContentを使う方法（テキストのみ）
あとがき
3つの追加方法
JavaScriptを使ってページにテキストや要素を表示する場合、大きく分けて3つの方法があります。
それぞれについて説明していきます。
document.write();を使う方法
先ずは「document.write();を使う方法」から書いていきます。
最初に使用例のコードを書いておきます。
See the Pen
YzXvLgZ by 朱夏 (@syunatsu1)
on CodePen.
こんな感じでページ上にテキストや変数を組み合わせて文章を表示させる事が出来ます。
また、テキストとしてHTMLタグを書くこともできるので、これによって要素を表示する事も可能です。
メリット、デメリットは以下の様な感じになります。
表示位置を指定して表示する方法はというと、2つ目の「innerHTML」を使います。
innerHTMLを使う方法
というわけで「innerHTMLを使う方法」を説明していきます。
コードはこんな感じに書きます。
See the Pen
rNVKKQW by 朱夏 (@syunatsu1)
on CodePen.
この方法では、HTML上での表示位置をidで特定します。
特定した要素の中にテキストや要素を表示します。
メリット、デメリットは以下。
表示位置の特定のためにコードが長くなってしまうデメリットはありますが、一番汎用的に使えるのがこれですね。
textContentを使う方法（テキストのみ）
3つ目は「textContentを使う方法（テキストのみ）」について解説します。
こちらはテキストのみで要素は追加できません。
それではコードを見てみましょう。
See the Pen
jOPKpbq by 朱夏 (@syunatsu1)
on CodePen.
「innerHTML」の様に表示位置を指定できますが、HTMLのタグは認識されずテキストとして表示されます。
メリットとデメリットはこちら。
デメリットとして要素の追加が出来ないと書きましたが、裏を返せばHTMLタグをそのままテキスト表示する事が出来るということです。
これは、意図せずHTMLタグとして認識されてしまうといった事故を防ぐ事が出来ます。
思考停止で汎用的な方法を使うのではなく、用途によって方法を選択して使うのが、後々のバグ回避にもつながるかと思います。
あとがき
というわけで、JavaScriptをつかってテキストや要素を表示させる方法を解説してみました。
初心者向けということで、基本の部分の解説になります。
今回のまとめ。
- 基本の表示方法は3つ
- 用途によって使い分ける
- JavaScriptで書くメリットがある
今回は触れませんでしたが、「innerHTML」や「textContent」には1つ大きな特徴があります。
それは、後から処理されたコードの内容で上書きされることです。
上書きせずに追記する方法は別にあるのですが、その辺は次回の課題ということで。
今回はここまでです。
次回もよろしくお願いします。
