「jQuery」wrap関数で要素で囲むサンプル

2022年4月24日

環境
jquery3.6.0
Google Chrome 100.0.4896.127
Windows 10 64bit
書式
1.$(セレクタID).wrap(“divタグ要素")
wrapメソッドで個別に引数の要素で囲みます
2.$(セレクタID).unwrap().text(要素);
unwrapメソッドを使用して指定の要素の親の要素を削除します。

使用例

<style>.gg{color:red;}</style>
<div class="cft">T</div>
<input type="button" id="btnAdd" value="検証">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
      $("#btnAdd").click(function() {
            const res = $(".cft").text();

            if(res[0] === "T" ){
           //wrapメソッドでcftに引数の要素で囲みます
                  $(".cft").wrap("<div class='gg'></div>").text("S");
            }else{
          //unwrapメソッドで指定の要素(.cft)の親の要素を削除します
                  $(".cft").unwrap().text("T");
            }
      });

</script>

実行結果
「検証」ボタンを押下後、「<div class="gg"><div class="cft">S</div></div>」タグを追加します。
「検証」ボタンを再度押下後、「<div class="gg">」の要素を削除します。