【jQuery】wrapInner()で指定した要素の内側に入れ込む!

指定した要素の内側に入れ込むにはjQueryのwrapInner()を使用します。

jQueryのwrapInner()とは指定した要素の内側を構造的に指定のHTMLで囲むメソッドであり、指定した要素の中に新しいタグを作成することができます。

つまり、対象となる要素の「子要素」としてラップすることになる為、指定した要素の「親要素」としてラップするwrap()とは反対のメソッドになります。

また、wrapInner()のパラメータには関数を指定することもできますので、囲みたい要素を戻り値として返すこともできます。

今回は、jQueryのwrapInner()を使って指定した要素の内側に入れ込む方法について以下の内容で解説していきます。

⚫︎ html要素を設定して指定した要素の内側に入れ込む場合
⚫︎ 条件などを設定して指定した要素の内側に入れ込む場合

⚫︎ 要素を指定したタグでまとめて囲む方法
⚫︎ タグで囲まれた要素を削除する方法

ハルトさん

今回はjQueryのwrapInner()で指定した要素で囲む方法について説明していきます。

さとみさん

お願いします!

wrapInner()とは

jQueryのwrapInner()とは指定した要素の内側を構造的に指定のHTMLで囲むメソッドであり、指定した要素の内側を囲むことができます。

wrapInner()の書き方

wrapInner()の書き方は下記となります。

パラメータ

⚫︎ ラップする要素:
セレクタをラップする(囲む)為の要素を指定する
(文字列、セレクタ、jQueryオブジェクト、DOM要素で指定できる)
⚫︎ 関数:
囲みたい要素を戻り値として返す関数を指定する

wrapInner()のパラメータに囲む要素を指定することで、セレクタの内側を「ラップする要素」で囲むことができます。
また、パラメータに関数を指定することで、囲みたい要素を戻り値として返すことができます。

指定した要素の内側に入れ込むサンプルコード

指定した要素の内側に入れ込むサンプルコードを紹介します。

html要素を設定して指定した要素の内側に入れ込む場合

html要素を設定して指定した要素の内側に入れ込む場合は、wrapInner()のパラメータにラップする要素を指定します。

sample.html

style.css

index.js

出力結果

wrapInner()のパラメータにラップする要素を指定することで、html要素を設定して指定した要素の内側に入れ込むことができます。
その為、ボタンを押すとそれぞれ指定したタグの中にラッピングされます。

戻り値を設定して指定した要素の内側に入れ込む場合

>戻り値を設定して指定した要素の内側に入れ込む場合はwrapInner()のパラメータに関数を指定します。

sample.html

index.js

index.js

出力結果

wrapInner()のパラメータに関数を指定することで、条件などを設定した後に囲みたい要素を戻り値として返すことができます。
その為、btnBクラスのボタンを先に押すとラップされませんが、btnAクラスのボタンを押した後に、btnBクラスのボタンを押すと要素がラップされるようになります。

wrapInner()とwrap()の違い

wrapInner()とwrap()はどちらも要素をラップする(囲む)メソッドですが、使い方に違いがあります。

それは、「指定した要素の内側に囲むか外側に囲むか」です。

さとみさん

「指定した要素の内側に囲むか外側に囲むか」とはどういうことですか?

ハルトさん

指定した要素にwrapInner()やwrap()を使用した場合、指定した要素の中にある要素のみをラップするのか、指定した要素全体をラップするのかになります。
言葉ではわかりにくいと思いますので、wrapInner()とwrap()の違いをサンプルコードで確認してみましょう。

sample.html

index.js

index.js

出力結果

wrapInner()とwrap()の両メソッドによって、指定した要素をラップしています。
どちらも同じように見えますが、見て欲しいのは下記のコードの方になります。

メソッド使用後のsample.html

wrapInner()の場合は指定した要素の中からwrapEle1クラスでラップしていますが、wrap()の場合は指定した要素の外からwrapEle2クラスでラップしています。

jQueryのwrap()メソッドについて詳しく知りたい場合はこちらをご参考ください。

さとみさん

確かに、指定した要素の中で囲んでいるwrapInner()に対して、wrap()は指定した要素の外で囲んでいますね!

ハルトさん

そうですよね。
これが、wrapInner()とwrap()の違いになります。

今回のポイント

wrapInner()で指定した要素の内側に入れ込む

⚫︎ 指定した要素の内側に入れ込むにはjQueryのwrapInner()を使用する

⚫︎ 指定した要素の内側に入れ込むにはwrapInner()メソッドのパラメータにラップする要素で使用する

⚫︎ 戻り値を設定して指定した要素の内側に入れ込むにはwrapInner()メソッドのパラメータに関数を指定する

⚫︎ wrapInner()とwrap()の違いは、「指定した要素の内側に囲むか外側に囲むか」である

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し