jQuery wrapInnerメソッドで指定の要素の下に個別に要素で囲むサンプル
環境
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」以下を削除します。