「jQuery」wrapInnerで指定の要素の下でタグを囲むサンプル

2014年2月8日2021年11月26日

書式
1.指定要素の下でタグを囲む
(“セレクタ名1").wrapInner(“<span class=’セレクタ名2′ style=’xxx’>");
$(“セレクタ名2").text(“xxx");

2.指定要素の下でタグを削除
$(“セレクタ名2").remove();

使用例

<!--cssの定義 -->
<style>.kk{color:red;}</style>

<p class="cft">Abc</p>
<p class="cft">Ade</p>

<input type="button" id="btnWrap" value="検証">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
  //ボタンを押す
      $("#btnWrap").click(function() {
            const kd = $(".cft").text();
            if(kd[0] === "A" ){
        //wrapInnerで指定要素の下でタグを囲む
      	$(".cft").wrapInner("<span class='sp' style='background-color:#FFCACA;'>");
                  $(".sp").text("BBC");
            }else{
           /*指定要素を削除します*/
   			$(".sp").remove();
                  $(".cft").text("Abc");
            }
      });

</script>