jQuery wrapInnerメソッドで指定の要素の下に個別に要素で囲むサンプル

2022年10月18日

環境
jQuery 3.6.0
Windows 10 Home 64bit

構文
1.$(セレクター名).wrapInner(要素タグ);
wrapInnerメソッドを使って、指定の要素(.p3)の下で個別に引数の要素で囲みます。
2.$(セレクター名).remove();
removeメソッドを使って指定タグ以下の要素を削除します。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
.tmd {
  color:green;
 }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
     $("#btnchg").click(function() {
         const tA = $(".ta").text();
        
            if(tA[0] === "黒" ){
       　  /* wrapInnerで指定の要素(.ta)の下で個別に引数の要素で囲む*/
                  $(".ta").wrapInner("<span class='tmd'>");
            $(".tmd").text("緑");
            }else{
           //指定要素を削除
        　　$(".tmd").remove();
            $(".ta").text("黒");
            }
      });
});
</script>
</head>
<body>

<p class="ta">黒</p>
<p class="ta">黒</p>

<input type="button" id="btnchg" value="変更">

</body>
</html>

実行結果

「変更」ボタンを押すと、wrapInnerメソッドで指定要素の下にspanタグを追加します。
<span class="tmd">緑</span>
再度「変更」ボタンを押すと、removeメソッドで指定要素「tmd」以下を削除します。

jQuery

Posted by arkgame

関連記事: