トップ 言語 JavaScript 入門編 htmlに文字や文字列を表示する方法

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に表示する例

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で文字列をhtmlに表示する例

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ですね。

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

もっと知識を広げるための参考

戻る

スポンサーリンク

サイト内のページ

言語
C・C++ /HTML /Java /JavaScript /PHP /シェルスクリプト

開発環境
Ant /Bcc /Eclipse /gcc /gdb /g++ /JDK /JUnit /ZAP

技術・仕様
Ajax /CORBA /Java EE(旧称J2EE) /JNI

ライブラリ/Framework/CMS
jQuery /Lucene /MyBatis /RESTEasy /Spring /Struts /Seasar2 /WordPress

ITインフラ OSとミドルウェア
Linux /Windows /シェル
Apache/Tomcat /MySQL /Redis /Solr /vsftpd

ITインフラ PC 製品
ZOTAC

ITインフラ サーバー
Web公開サーバー構築

ITインフラ ネットワーク
プログラミング /機器 /構築

ITインフラ セキュリティ
公開サーバーのセキュリティ

SI
ホームページの作り方 /小さな会社のISMS

その他
IT用語 /ITスキル体系 /トレンド履歴

スポンサーリンク