jQuery で innerHTML の書き換え／取得／追記／削除を行う方法
<div> タグの内容を編集したい！
<span> タグの内容を編集したい！
そんな時 JavaScript では innerHTML のプロパティを利用します。指定した要素の中身を取得、書き換え、そして削除が行えます。これを jQuery で実装する場合 .html() を利用します。しかし innerHTML の処理を全て .html() に置き換えるのはおすすめできません。
用途に応じていくつかの関数を使い分けることで、処理内容が分かりやすいプログラムになります。では具体的な処理パターンを例に挙げて、innerHTML を jQuery で実装するサンプルを紹介しましょう。
サンプルプログラムでは、id:hogehoge を持つ div 要素に対して処理する例で説明していきます。それぞれ処理用ボタンのクリックイベントを起点に、プログラムが走るようにコーディングします。
<div id="hogehoge">要素内のテキスト【変更前】</div>
なお下記の説明では変更箇所がわかるように、div 要素に背景色を加えています。
innerHTML の書き換え処理を jQuery で実装
// 一般的なJavaScriptで実装
function test() {
document.getElementById("hogehoge").innerHTML = "要素の内容を書き換えます";
}
// jQueryで実装
$(function () {
$("#edit_button").click( function() {
$("#hogehoge").html("要素の内容を書き換えます");
});
});
書き換え処理のサンプル
設定するテキストは、html タグが含まれていても構いません。
innerHTML の取得処理を 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で実装
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で実装
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()
削除処理のサンプル .empty()
div タグに背景色を設定しているので、div 要素が残るケースと消えるケースの違いが理解できたかと思います。
.empty() と .html(“”) の処理は結果的に同じになります。プログラム的には .empty() を利用したほうが意図する内容が伝わりやすいかもしれません。変数値で書き換えるような場合は .html([変数]) のほうが勝手が良いでしょう。
.remove() は外側の div 要素を消してしまうため、JavaScript の innnerHTML とは別物の処理になります。一度消してしまった要素は、画面を再読込するまで消えたままになるので、処理の違いを理解した上で利用するようにしましょう。
