【Javascript入門】JavascriptでHTMLの要素やテキストを出力する方法4つを解説!

2021.09.17
javascript html 出力

Javascriptを勉強していて、

「Javascriptの結果はどうやってHTMLで出力すれば良いの?」

「学習で良くでてくるJavascriptのコンソールて何?」

そう思ったことはありませんか?

今回は、そんな方のために

Javascriptを使ってHTMLデータを出力する4つの方法

を紹介していきます。

たった1項目ですが、それぞれの方法が一言では説明しきれないので、一つずつ丁寧に解説します。

Javascriptでアラートはもう使える!という方や、JavascriptでどのようにHTMLが取得できているのかわからないという方に役立つ内容となっています。

ぜひ最後まで見てくださいね。

JavascriptのデータをHTMLで出力する方法

JavascriptのデータをHTMLに渡して、出力させる方法は以下の4つ。

  1. innerHTMLプロパティを使う
  2. textContentプロパティを使う
  3. innerTextを使う
  4. console.log()を使う

特に、「textContent」と「innerText」は名前が似ていて混同する方が多いので、しっかり両者の特徴や違いを確認しておきましょう。

今回は、以下のHTMLコードを記述した場合で、それぞれの使い方と出力結果を見ていきます。

<!-- HTML -->
  <body>
    <p id="test">
      <!-- スタイルシート部分 -->
      <style>#test { color: blue;}</style>

      <!-- テキスト部分 -->
     Javascriptを使ってHTMLを出力しています。

      <!-- spanタグ 隠しテキスト部分 -->
      <span style="display: none;">これは隠しテキストです。</span>
    </p>    
    <script type="text/javascript" src="sample.js"></script>
  </body>

上記の場合、ブラウザ上では以下のように表示されます。

では、それぞれの特徴と使い方を解説していきます。

1.HTMLの要素をHTMLとして出力する:innerHTML

innerHTMLプロパティは、要素の中身も含めてHTMLとしてデータを出力できます。

どのようにデータを取得しているか、アラートで出力してみましょう。

var text = document.getElementById('test');
alert(test.innerHTML);

上記の出力結果は以下のようになりました。

HTMLのすべての要素と中身を取得できているということがわかります。

上記からわかるように、このプロパティはテキストだけでなく、HTMLの要素ごと変更したい時に利用できます。

2.HTMLのすべての要素をテキストとして出力:textContent

textContentプロパティは、Javascriptにおける処理やテキストなどのノードの内側のテキストを取得し、出力できます。

ノードとは「いくつもの点と点で結ばれた分岐における”点”のこと」です。

では、実際にどのようにHTMLデータを取得しているか、innerHTMLプロパティと同様にアラートで見てみましょう。

var text = document.getElementById('test');
alert(test.textContent);

上記のように記述したところ、以下のような出力結果となりました。

HTMLのすべての要素を取得できていることがわかります。

3.HTMLのテキストのみを出力:innerText

innerTextプロパティは、「人間が読める」要素のみを取得できます。

人間が読める要素とはどういうことなのでしょうか?実際にアラートで出力結果を見てみましょう。

var text = document.getElementById('test');
alert(test.innerText);

上記を記述したところ、以下のような出力結果となりました。

「<」や「>」といった記号を含むstyleタグなどは取得されず、人間が解読できる「テキスト」のみ出力されていることがわかります。

4.HTMLそのものをコンソールに出力する:console.log()

コンソールとは「制御盤」という意味を持ち、IT用語ではコンピューターの入出力による対話的な操作システムと言われています。

簡単に説明すると、コンピューターの裏側の見えないところで行き来しているデータのことです。

ブラウザ上では、開発者ツール(デベロッパーツール)で確認することができます。

では、1~3と同様のHTMLをconsole.logを使って出力してみます。

console.log(document.getElementById("test"));

上記のように記述した場合は、以下のように出力されます。

<p id="test">
      <!-- スタイルシート部分 -->
      <style>#test { color: blue;}</style>

      <!-- テキスト部分 -->
      Javascriptを使ってテキストの変更や表示を行っています。

      <!-- spanタグ 隠しテキスト部分 -->
      <span style="display: none;">これは隠しテキストです。</span>
</p>

HTMLそのものを取得していることがわかりますね。


プログラミングスキルを身につけて、アプリケーションWEBサービスを作りたい方へ!
DMM WEBCAMP】は、独学では挫折率の高いプログラミング学習を徹底サポートします。
✔受講生の97%が未経験からのスタート!
✔一人一人に合わせた学習計画で進められるため、仕事や学校と両立できる!
✔基礎知識をゼロから丁寧に学習できるコースを用意!

あなたに合ったカリキュラムを紹介

まとめ:Javascripの取得結果をHTMLに出力できるようになれば、できることの幅が広がる

いざHTMLの要素やテキストをJavascriptで出力するとなると、そもそも何を取得できているかわからず、思った出力ができないこともしばしば…

まずは、使用するプロパティによってHTMLで取得できるものが異なるので、それぞれの特徴を把握することが大切です。

今回ご紹介した4つの方法を覚えておくことで、JavascriptでHTMLの要素やテキストを書き換えたい時などでも、スムーズに対応することができますよ。

JavascriptとHTMLの関係性は簡単そうで難しいので、プロパティと要素などの繋がりを一つ一つ理解していきましょう!


未経験からホームページWEBアプリケーションが作れるようになりたい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】は
✔︎未経験からでも実践的なスキルが身に付くカリキュラムを用意!
✔分からないことは、チャットやビデオ通話で講師に好きなだけ質問可能!
✔通学不要!スキマ時間でプログラミング学習ができる!

経済産業省認定の圧倒的カリキュラム

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

PAGE TOP

© 2021 WEBCAMP MEDIA Powered by AFFINGER5