JavaScriptでhtmlに文字や文字列を表示する方法

JavaScriptでhtmlに文字や文字列を表示する方法についてまとめています。

JavaScriptで文字や文字列をhtmlに表示する

JavaScriptで文字や文字列をhtmlに表示することができます。やり方はいくつかありますが、「docment.write」を使用する方法を紹介します。

htmlに記述するJavaScriptのコード

以下のように「docment.write」を使用したコードをhtml文書中に記述します。

<script type="text/javascript">
  document.write(＜文字または文字列＞);
</script>

JavaScriptで文字をhtmlに表示する例

html文書中にAの文字を表示する例です。

サンプルコード

表示したい箇所に「document.write('A');」のコードを記述します。

<html>
<body>
<script type="text/javascript">
  document.write('A');
</script>
</body>
</html>

表示方法と表示結果

サンプルコードを「Sample1.html」のように拡張子が「.html」になるファイルを作成して、ChromeやFirefoxなど、ブラウザで開けば表示できます。表示した結果は次のようになります。

JavaScriptで文字列をhtmlに表示する例

html文書中にHello World!!という文字列を表示する例です。

サンプルコード

表示したい箇所に「document.write("Hello World!!");」のコードを記述します。

<html>
<body>
<script type="text/javascript">
  document.write("Hello World!!");
</script>
</body>
</html>

表示方法と表示結果

htmlファイルに保存して、ChromeやFirefoxなど、ブラウザで開けば表示できます。表示した結果は次のようになります。

JavaScriptでAタグのURLリンクを表示する例

今度は応用として、html文書中にAタグのURLリンクを表示する例を見ていきます。

サンプルコード

上のサンプルで作成したHTMLに文字を表示するHTMLファイルと文字列を表示するHTMLファイルのリンクを表示してみます。

<html>
<body>
<script type="text/javascript">
  document.write("<p><a href=\"Sample1.html\">Sample1</a></p>");
  document.write("<p><a href=\"Sample2.html\">Sample1</a></p>");
</script>
</body>
</html>

表示方法と表示結果

コードを記述してhtmlファイルに保存します。また、リンクファイルをSample1.htmlとSample2.htmlというファイル名で同じフォルダに配置します。配置したらChromeやFirefoxなど、ブラウザで開けば表示できます。表示した結果は次のようになります。リンクをクリックすると上述のサンプルの結果の表示になればOKですね。