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」以下を削除します。