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

公開日: 2021.07.31
更新日: 2024.01.24
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()」というメソッドもありますが、現在は非推奨なので使わないようにしましょう。


今の働き方に不満はあるけど、日々の業務が忙しくてゆっくり考える時間がない…
そんな悩みを持つ方に向けて【DMM WEBCAMP】では無料のキャリア相談を実施しています。
ビデオ通話で相談をすることができるため、仕事で忙しい方でもスキマ時間に気軽にカウンセリングを受けることも可能です!
プロのキャリアカウンセラーと一緒に、今後のキャリアについて考えてみませんか?

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

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

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

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

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

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


今の働き方に不満はあるけど、日々の業務が忙しくてゆっくり考える時間がない…
そんな悩みを持つ方に向けて【DMM WEBCAMP】では無料のキャリア相談を実施しています。
ビデオ通話で相談をすることができるため、仕事で忙しい方でもスキマ時間に気軽にカウンセリングを受けることも可能です!
プロのキャリアカウンセラーと一緒に、今後のキャリアについて考えてみませんか?

関連記事

資料請求

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

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

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

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

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

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

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5