JavaScript

【JavaScript】HTMLのテキストを取得・設定する方法

こちらの記事では、JavaScriptでHTMLのテキストを取得・設定する方法についてサンプルコードを用いて分かりやすく解説しています。

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

動画情報
作成者CodeMafia
学習時間19.5時間
受講者数28,547人
レビュー (5,025件)
動画の詳細はこちら

テキストを取得・設定する2つのプロパティ

JavaScriptで、HTMLのテキストを取得・設定したい場合は「textContent」「innerHTML」2つのプロパティが使われます。

2つの違いは、テキストを設定する時にあります。textContentは設定した文字列をそのまま表示させるのに対して、innerHTMLは設定した文字列はそのまま表示させるのではなくHTMLとして表示させます。

つまり、textContentでタグも含めた文字列を設定しても、そのタグはHTMLとしてではなく文字列として表示されてしまいます。タグを含めたテキストを設定したい場合はinnerHTMLを使いましょう。

HTMLのテキストを取得する方法

textContentとinnerHTMLを使ってHTMLのテキスト情報を取得する方法は以下のとおりです。
<p id="sample-text">サンプルテキスト</p>

<script>
window.addEventListener('DOMContentLoaded', () => {
    const sampleText = document.getElementById('sample-text'); ①
  
    /*** ▼③ textContent ***/
    console.log(sampleText.textContent); // サンプルテキスト

    /*** ▼② innerHTML ***/
    console.log(sampleText.innerHTML);   // サンプルテキスト
});
</script>
コード解説

  1. 取得したいテキスト情報がある要素を変数sampleTextに代入します。
  2. sampleText.textContentでテキスト情報を取得することができます。
  3. sampleText.innerHTMLでテキスト情報を取得することができます。

HTMLのテキストを設定する方法

textContentとinnerHTMLを使ってHTMLのテキスト情報を設定する方法は以下のとおりです。
<p id="sample">変更前のテキスト</p>

<script>
const sample = document.getElementById('sample');
  
sample.textContent = "変更後のテキスト";
sample.innerHTML = "変更後のテキスト";
</script>

まず始めに文字を設定したい対象の要素を取得し、変数に代入します。

textContentで文字を設定する場合は「変数.textContent = “設定した文字列”」、innerHTMLで文字を設定する場合は「変数.innerHTML = “設定したい文字列”」の記述をします。

サンプルコード

こちらで紹介するサンプルコードは、フォームに文字を入力しボタンをクリックすると入力する文字が表示されます。
<input id="input" placeholder=”文字を入力してください”></input>
<button id="btn">文字を入力後にクリック</button>
<p>入力された値は「<span id="output"></span>」です</p>

<script>
function outputBtn(){
  output.textContent = input.value; // ⑤
  output.innerHTML = input.value;   // ⑥
}
  
window.addEventListener('DOMContentLoaded', () => {
    const input = document.getElementById('input');   // ①
    const output = document.getElementById('output'); // ②
    const btn = document.getElementById('btn');       // ③
    btn.addEventListener('click',outputBtn,false);    // ④
});
</script>
実行結果

入力された値は「」です

コード解説

  1. 入力フォームの要素を変数inputに代入します。
  2. 入力した文字を表示させる要素を変数outputに代入します。
  3. クリックイベントを設定したい要素を変数btnに代入します。
  4. btnにクリックイベントを設定し、イベント発火後に関数outputBtnを実行するように設定します。
  5. output.textContent = input.valueで入力された文字列を表示させます。
  6. output.innerHTML = input.valueで入力された文字列を表示させます。

豆知識

文字列をHTMLとして表示させるinnerHTMLは、既存の要素を全て新しいものに書き換えてしまうことや、代入による直接的な操作をしているため処理速度が遅いです。

要素の内容を置き換える場合は、innerHTMLを使っても問題ないですがHTMLを追加する場合は、insertAdjacentHTMLメソッドを使うことが推奨されています。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村