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

2013/11/27

<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 とは別物の処理になります。一度消してしまった要素は、画面を再読込するまで消えたままになるので、処理の違いを理解した上で利用するようにしましょう。

最新の更新情報は、Twitter、Facebook、Freedly にてお届け!

NJ-CLUCKER RSS

このブログの運営者

NJ

気力・体力勝負なシステム業界のエンジニアを経て、個人事業主として独立。Web サイト運営、動画制作など活動の場を広げています。

このブログでは、困ってたどり着いた人に、分かりやすく答えを提供できるように心掛けています。更新情報は、Twitter や Facebook ページを参照ください。フォローお待ちしています。

Facebook ページ NJ-CLUCKER
このブログが役に立ったら
「いいね!」お願いします

サイト内検索

最近のエントリー

どうぶつの森ポケットキャンプのダウンロード方法とインストール手順【初期設定】

どうぶつの森ポケットキャンプの配信開始も通信エラーが頻発!原因はアクセス過多か?!

WordPress でプラグインを利用せずメールフォームを自作!画面遷移せず非同期処理で実装

安室奈美恵 Finally 再録曲は完コピを超えた!もはやベストアルバムではなくニューアルバムだ!

iTunes で再生回数や最後に再生した日が更新されない場合の対処法

AbemaTV(アベマTV)をテレビ画面で見る方法!基本的にネット環境は必須!

Nintendo Switch 初期不良による問い合わせから修理までの流れ

Windows 10 起動時に Chrome が勝手に起動する原因は?急に起動するようになったのは OS の仕様変更によるもの

JavaScript の数値チェックに isNaN を使ってはいけない理由

Nintendo Switch のセーブデータを保持したまま本体を初期化する!本体の調子が悪い時の対処法の1つです!