【JavaScript入門】文字列を表示する方法(document.write/innerHTML)

こんにちは!エンジニアの中沢です。

JavaScriptには文字列を表示するための「document.write」があります。

HTMLタグを含めて文字列を表示することができるので、上手く活用してください。

この記事では、

・JavaScriptの文字列の表示とは
・document.writeで文字列を表示する方法

という基本的な内容から、

・HTMLタグを含めて文字列を表示する方法
・innerHTMLで文字列を表示する方法

などの応用的な使い方に関しても解説していきます。

今回はこれらの方法を覚えるために、文字列を表示するさまざまな使い方をわかりやすく解説します!

JavaScriptの文字列の表示とは

Webページに文字列を表示するには、様々な方法があります。

JavaScriptを使って文字列を表示するには、「document.write」や、「innerHTML」を使います。

JavaScriptを使えば文字列の表示を制御することができます。

HTMLタグを含めて文字列を表示することもできるので、うまく活用してください。

document.writeで文字列を表示する方法

ここでは、document.writeで文字列を表示する方法を解説します。

document.writeで文字列を表示するには、引数に表示したい文字列を指定します。

次のプログラムで確認してみましょう。

document.write("Samurai");

実行結果:

Samurai

このようにして文字列を表示することができました。

HTMLタグを含めて文字列を表示する方法

ここでは、HTMLタグを含めて文字列を表示する方法を解説します。

HTMLタグを含めて文字列を表示するには、引数にHTMLタグを含めて表示したい文字列を指定します。

次のプログラムで確認してみましょう。

document.write("<strong>Samurai</strong>");

実行結果:

Samurai

このようにして、HTMLタグを含めて文字列を表示することができました。

innerHTMLで文字列を表示する方法

ここでは、innerHTMLで文字列を表示する方法を解説します。

innerHTMLで文字列を表示するには、idで指定した文字列を置き換えます。

次のプログラムで確認してみましょう。

<span id="samurai">samurai</p>
<script>
var demo2 = document.getElementById("samurai");
demo2.innerHTML = "Samurai";
</script>

実行結果:

Samurai

このようにして、文字列を表示することができました。

まとめ

いかがでしたか?

今回は文字列を表示する方法を解説しました。

JavaScriptを使って文字列を置き換えることができるので、ぜひ活用してくださいね。

もし、文字列を表示する方法を忘れてしまったらこの記事を確認してください!

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

中沢 丈

中沢 丈

フリーランスエンジニア。
システム開発からコンテンツ作成まで幅広く対応します。

連絡先はこちらです。
[email protected]