「jQuery」wrap関数で要素で囲むサンプル
環境
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">」の要素を削除します。