jQueryのappend()は移動にも使える
appendという言葉からして、追加の機能だと思っていた。
これだと、appendという言葉通り、追加になる。
$("#d1").append("<input type=button>");
しかし、既存の要素を対象にすると、
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script> <script> var sw = 1; function move(){ if(sw == 1){ $("#d1").append($("#b1")); sw = 2; } else{ $("#d2").append($("#b1")); sw = 1; } } </script> <div id="d1" style="background-color: red;"> １つめのdiv </div> <div id="d2" style="background-color: blue;"> 2つめのdiv </div> <input type="button" id="b1" value="ぼたん"> <input type="button" id="b2" value="移動" onclick="move()">
appendを繰り返しても増えるのではなく、移動している。
↓の移動ボタンを何回も押してみてください。
１つめのdiv
2つめのdiv
