JavascriptでHTMLを書き換える方法を解説!上手く反映されない時の原因と対策も

2021.09.17
javascript html 書き換え

Javascriptを勉強していて、

「JavascriptでHTMLを書き換えたい」

「似たようなプロパティが多いけど、どれを使えば良いの?」

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

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

JavascriptでHTMLを書き換える4つの方法

について詳しく解説していきます。

JavascriptでHTMLを書き換えられるようになれば、ボタンを押した後にテキストを表示させるなどもできるようになります。

しかし、外部からの入力がある場合、HTMLの受け渡しは非常にリスクを伴います。

データの行き来があるJavascriptとHTMLの関係をしっかり理解して、安全に使えるようにしましょう!

JavascriptでHTMLを書き換える方法

まずは、Javascriptを使ってHTMLを書き換える方法4つを紹介します。

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

どれもHTMLのテキストを書き換えることができますが、反映される範囲が異なります。

適切な方法を選択できるように、それぞれのプロパティやメソッドの特徴と使い方を見ていきましょう。

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

<!-- HTML -->
<p id="test">
  Javascriptを使ってHTMLを書き換えましょう!
</p>

上記のHTMLコードのみの場合、ブラウザ表示は以下のようになります。

1.テキストだけを書き換える:textContent

textContentは、HTMLのテキストだけを書き換えたい!という時に使用できるプロパティです。

実際にどのように使用できるのか、見ていきましょう。

// Javascript
let text = document.getElementById('test').textContent; //宣言
document.getElementById('test').textContent = 'textContentでHTMLを書き換えています';

「変数textの値は’Javascriptを使ってHTMLを書き換えましょう!’になる」ということを宣言してから、書き換えを行っています。

こちらをブラウザ表示すると、以下のような結果になります。

HTMLのテキストがしっかり書き換えられているのがわかりますね。

また、textContentには、scriptタグなどを含むすべての要素の内容も取得するという特徴があります。

ブラウザ上でも表示されるテキストだけでなく、要素内の情報も裏側で理解してくれているということです。

2.テキストだけを書き換える:innerText

innerTextは、textContentと同様にHTMLのテキストのみを書き換えることができるプロパティです。

textContentと異なり、すべての要素の内容は取得せず、ブラウザ上でも表示される人間が読める要素のみを取得しています。

では、実際にどのように使用できるのか、見ていきましょう。

// Javascript
let text = document.getElementById('test').innerText;
document.getElementById('test').innerText = 'innerTextでHTMLを書き換えています';

ブラウザ表示結果↓

取得内容以外、ほぼtextContentと同じように思えますが、実は計算が重くなる「再フロー」を起動しているという特徴も兼ね備えています。

処理速度が変わってくるので、特別な理由がない限り、innerTextではなくtextContentを使用するのが良いでしょう。

3.要素ごと書き換える:innerHTML

innerHTMLとは、その名の通りHTMLそのものを書き換えることができるプロパティです。

では、実際にどのように使うのか見ていきましょう。

// Javascript
let text = document.getElementById('test').innerHTML;
document.getElementById('test').innerHTML = '<h1>innerHTMLでHTMLを書き換えています</h1>';

ブラウザでは以下のように表示されます。

テキストだけでなく、h1タグも書き換えできていることがわかります。

要素ごと書き換えたい時に便利なプロパティですが、HTMLそのものを受け渡しするinnerHTMLは、セキュリティ面でリスクを生じます。

コメントなどで外部から入力を受け取った場合、innerHTMLを使うことで、悪意のあるリンクもそのままHTMLに反映されてしまうという危険性があるので注意しましょう。

4.任意の場所に追加できる:insertAdjacentHTML

insertAdjacentHTMLは、任意の場所にHTMLを挿入することができるメソッドです。

では、実際にどのように使うのか見ていきましょう。

今回は、1~3で使用していたHTMLコードではなく以下のHTMLとJavascriptコードを使用します。

<!-- HTML -->

<div id="contsBtn">
  <button id="clickBtn">こちらがボタンです</button>
</div>
// Javascript
let clickBtn = document.getElementById('clickBtn');
clickBtn.addEventListener('click', function() {
  alert('ボタンが押されました');
});

「こちらがボタンです」というボタンを押すと、「ボタンが押されました」というアラートが表示されるシンプルなコードです。

こちらにinsertAdjacentHTMLを使って、HTMLを追加していきます。

let contsBtn = document.getElementById('contsBtn');
contsBtn.insertAdjacentHTML('beforebegin', '<h1>insertAdjacentHTMLでテキストを追加しています</h1>');

上記のように、

指定したい変数など.insertAdjacentHTML(挿入する場所, 挿入したいHTMLやテキスト);

という構文を用いて記述します。

ブラウザの表示は以下のようになりました。

HTMLが書き換えられ、ボタンも正常に機能していることがわかりますね。

insertAdjacentHTMLメソッドの「挿入する場所」は全部で

  • beforebegin
  • afterbegin
  • beforeend
  • afterend

の4つがあり、

位置関係は以下のようになっています。

<!-- beforebegin -->
<div id="contsBtn">
  <!-- afterbegin -->
  <button id="clickBtn">こちらがボタンです</button>
<!-- beforeend -->
</div>
<!-- afterend -->

ちなみに、同じようなコードをinnerHTMLで実施すると、button要素までHTML文字列として取得されるのでボタンをクリックしても反応しなくなります。

このメソッドは、既存の要素を破壊(全ての要素を上書き)することなく、innerHTMLよりも処理スピードが速いという特徴があります。

また、HTML全体を書き換えられる「document.write()」というメソッドもありますが、現在は非推奨なので使わないようにしましょう。


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

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

まとめ:JavascriptでHTMLの書き換えて快適にコーディングしよう

今回は、JavascriptでHTMLのテキストや要素を書き換える方法4つをそれぞれ解説しました。

以下、この記事のまとめです。

  • テキストを書き換える時はtextContentを使う
  • 要素も書き換えたい時はinsertAdjacentHTML()を使う
  • innerHTML、document.write()は使わない

JavascriptによるHTMLの書き換えは、外部からコメントを入力してもらう時や、ボタンを押した後の処理などで必須の技術です。

セキュリティ面に注意しつつ、正しいプロパティやメソッドを活用して様々な処理を実装してみましょう!


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

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

関連記事

資料請求

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

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

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

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

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

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

    資料をダウンロードする

PAGE TOP

© 2021 WEBCAMP MEDIA Powered by AFFINGER5