【Jquery】Jqueryのdetach(デタッチ)の使い方

コード

<h1 class="aaa">あああ</h1>
<h1 class="bbb">いいい</h1>
<p>
<button id="button1">ボタン1</button>
<button id="button2">ボタン2</button>
<button id="reset">リセット</button>
</p>
<p>
<button id="button11">1戻すよ</button>
<button id="button22">2戻すよ</button>
</p>

let result;
const reset = $('.aaa,.bbb').detach();
reset.prependTo('body'); 

$('#button1').on('click', function() {
  if($('h1').hasClass('aaa')){
    result1 = $('.aaa').detach();
  }
})
$('#button2').on('click', function() {
   if($('h1').hasClass('bbb')){
   		result2 = $('.bbb').detach();
   }
})

$('#button11').on('click', function() {
    result1.prependTo('body'); 
})
$('#button22').on('click', function() {
    result2.prependTo('body');
})

$('#reset').on('click', function() {
   reset.prependTo('body'); 
})