トップ 言語 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 /Eclipse /Fiddler /gcc /gdb /Git /g++ /JDK /JMeter /JUnit /Teraterm /ZAP

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

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

Web API
Google Maps

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

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

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

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

PC製品
ZOTAC

SI
ホームページの作り方

その他
IT用語 /ITスキル体系

スポンサーリンク

関連サイト内検索ツール

zealseedsおよび関連サイト内のページが検索できます。

IPアドレス確認ツール

あなたのグローバルIPアドレスは以下です。

3.238.180.255

HTMLの表示色確認ツール

パスワード生成ツール

文字数のプルダウンを選択して、取得ボタンを押すと「a~z、A~Z、0~9」の文字を ランダムに組み合わせた文字列が表示されます。

ここに生成されます。

スポンサーリンク