「jQuery」wrapでして要素にタグを追加する
環境
jQuery 3.5.1
書式
$(“セレクタ名").wrap(“<div class=’cc’></div>")
$(“セレクタ名").unwrap().text(文字列)
使用例
<!--cssの定義 -->
<style>.kk{color:red;}</style>
<p id="cft">Abc</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" ){
//、wrapメソッドで個別に引数の要素
$("#cft").wrap("<div class='kk'></div>")
.text("BBC");
}else{
//unwrapメソッドで指定の要素
$("#cft").unwrap()
.text("Abc");
}
});
</script>
<!--cssの定義 -->
<style>.kk{color:red;}</style>
<p id="cft">Abc</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" ){
//、wrapメソッドで個別に引数の要素
$("#cft").wrap("<div class='kk'></div>")
.text("BBC");
}else{
//unwrapメソッドで指定の要素
$("#cft").unwrap()
.text("Abc");
}
});
</script>
<!--cssの定義 -->
<style>.kk{color:red;}</style>
<p id="cft">Abc</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" ){
//、wrapメソッドで個別に引数の要素
$("#cft").wrap("<div class='kk'></div>")
.text("BBC");
}else{
//unwrapメソッドで指定の要素
$("#cft").unwrap()
.text("Abc");
}
});
</script>
動作確認
1.「テスト」ボタンを押すと、wrapメソッドでセレクタ名「cft」にdivタグを追加します
2.再度「テスト」ボタンを押すと、指定要素cftの親の要素を削除します