jQuery で innerHTML の書き換え/取得/追記/削除を行う方法

更新日: 公開日:2013/11/27
innerHTMLをjQueryで実装

<div> タグの内容を編集したい!
<span> タグの内容を編集したい!

そんな時 JavaScript では innerHTML のプロパティを利用します。指定した要素の中身を取得、書き換え、そして削除が行えます。これを jQuery で実装する場合 .html() を利用します。しかし innerHTML の処理を全て .html() に置き換えるのはおすすめできません。

用途に応じていくつかの関数を使い分けることで、処理内容が分かりやすいプログラムになります。では具体的な処理パターンを例に挙げて、innerHTML を jQuery で実装するサンプルを紹介しましょう。

サンプルプログラムでは、id:hogehoge を持つ div 要素に対して処理する例で説明していきます。それぞれ処理用ボタンのクリックイベントを起点に、プログラムが走るようにコーディングします。

<div id="hogehoge">要素内のテキスト【変更前】</div>

なお下記の説明では変更箇所がわかるように、div 要素に背景色を加えています。

innerHTML の書き換え処理を jQuery で実装

JavaScript と jQuery の違い
// 一般的なJavaScriptで実装
function test() {
  document.getElementById("hogehoge").innerHTML = "要素の内容を書き換えます";
}

// jQueryで実装
$(function () {
  $("#edit_button").click( function() {
    $("#hogehoge").html("要素の内容を書き換えます");
  });
});

書き換え処理のサンプル

要素内のテキスト【変更前】

設定するテキストは、html タグが含まれていても構いません。

変更前のテキスト

innerHTML の取得処理を jQuery で実装

JavaScript と jQuery の違い
// 一般的なJavaScriptで実装
function test() {
  var hogeText = document.getElementById("hogehoge").innerHTML;
  alert(hogeText);
}

// jQueryで実装
$(function () {
  $("#get_button").click( function() {
    var hogeText = $("#hogehoge").html();
    alert(hogeText);
  });
});

取得処理のサンプル

要素の中身を取得

もし、取得元の要素に html タグが含まれている場合は、エスケープされない状態で値が取得されます。

リンク付きのまま中身を取得

innerHTML の追記処理を jQuery で実装

要素内への追記は .html() を利用せずに .append() を用います。

JavaScript と jQuery の違い
// 一般的なJavaScriptで実装
function test() {
  document.getElementById("hogehoge").innerHTML += "追記したい内容!";
}

// jQueryで実装
$(function () {
  $("#add_button").click( function() {
    $("#hogehoge").append("追記したい内容!");
  });
});

// innerHTML のように記述することも可能だが煩雑になる
$(function () {
  $("#add_button").click( function() {
    $("#hogehoge").html($("#hogehoge").html() + "追記したい内容★");
  });
});

追記処理のサンプル

この後ろに追記!

追記する内容に html タグが含まれていても何も問題ありません。

要素内にタグを含めて追記!

innerHTML の削除処理を jQuery で実装

削除処理は、何を削除したいかによって利用するメソッドが異なります。ここでは .remove()、.empty() を使った例も紹介しますが、目的によって使い分ける必要があります。

JavaScript と jQuery の違い
// 一般的なJavaScriptで実装
function test() {
  document.getElementById("hogehoge").innerHTML = "";
}

// jQueryで実装 .html() は <div> を残して中身を空にする
$(function () {
  $("#del_button").click( function() {
      $("#hogehoge").html("");
  });
});

// jQueryで実装 .remove() は <div> をまるごと削除
$(function () {
  $("#del_button").click( function() {
    $("#hogehoge").remove();
  });
});

// jQueryで実装 .empty() は id:hogehoge の子要素を全て削除
$(function () {
  $("#del_button").click( function() {
    $("#hogehoge").empty();
  });
});

削除処理のサンプル .html(“”)

要素の中身を空っぽにします

削除処理のサンプル .remove()

div ごと削除します

削除処理のサンプル .empty()

要素の中身を空っぽにします

div タグに背景色を設定しているので、div 要素が残るケースと消えるケースの違いが理解できたかと思います。

.empty() と .html(“”) の処理は結果的に同じになります。プログラム的には .empty() を利用したほうが意図する内容が伝わりやすいかもしれません。変数値で書き換えるような場合は .html([変数]) のほうが勝手が良いでしょう。

.remove() は外側の div 要素を消してしまうため、JavaScript の innnerHTML とは別物の処理になります。一度消してしまった要素は、画面を再読込するまで消えたままになるので、処理の違いを理解した上で利用するようにしましょう。

\ この記事をシェアする /

このブログの運営者

NJ

Web系メインで従事していた元システムエンジニア。現在は個人事業主として独立。Webサイト運営における「困った問題」の解決方法をブログで発信。Web サイト運営、ポップデザインや動画制作など、パソコンでモノづくりをしている。