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

2017/02/14 , , ,

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

そんな時に利用する JavaScript の innerHTML プロパティ。指定した要素の中身を取得、書き換えや削除などの編集が行えます。jQuery では、基本的に .html() で実装が出来ます。しかし innnerHTML の処理全てを .html() へ置き換えればいいと言うものではありません。

今回は様々な処理パターンを例に挙げ、innerHTML を jQuery で実装する場合のサンプルを紹介します。

サンプルプログラムでは具体的に id:hogehoge の <div> 要素に対する実装例で説明します。

実装イメージとしては、処理用のボタンのクリックイベントを起点に、処理が走るようにコーディングします。

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

書き換え処理のサンプル

変更前のテキスト


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

変更前のテキスト


innerHTML の取得処理を jQuery で実装

取得処理のサンプル

コジコジも好きだ―!


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

コジコジも好きだ―!


innerHTML の追記処理を jQuery で実装

追記処理は、わざわざ .html() で処理する必要はありません。
ここでは .append() を使って処理をします。

追記処理のサンプル

ダッフィーが好きだー!


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

ダッフィーが好きだー!


innerHTML の削除処理を jQuery で実装

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

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

パクチーパクチーパクチー


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

狭いところ狭いところ


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

狭いところaaaa狭いところ


.remove() と .empty() の違いは、上記サンプルでは分からないと思いますので、こちらは別途説明するエントリーを投稿しようと思います。完全に innerHTML と同じ動きで良いのであれば、.empty() で対応すればOKです。.remove() は、要素そのものを削除してまいますので、処理そのものの目的が異なる点は要注意です。

以上、innerHTML の各処理を jQuery で実装するサンプルのご紹介でした。

PAGE TOP ↑