【jQuery】insertAfterした要素を元の場所に戻す方法

Question

標題の通り、insertAfterしたDOMを元の場所に戻す良い方法はありますか？

サンプルコード

    <section>
      <div class="koko">
        <p>この下に移動してくる</p>
      </div>
      <div class="moveParent">
        <ul class="move">
          <li>移動したい（元に戻したい）</li>
          <li>移動したい（元に戻したい）</li>
        </ul>
      </div>
    </section>

  <script>
  $(function() {
  var winWidth = $(window).outerWidth();
  var navUA= navigator.userAgent;
  // 画面幅が639px以下、または UAがiPhone 又は Androidスマートフォンの時
  if (winWidth <= 639 || navUA.indexOf('iPhone') > 0 || navUA.indexOf('Android') > 0 && navUA.indexOf('Mobile') > 0) {
    $('.move').insertAfter('.koko p');
  } else {
    $('.moveParent').insertAfter('.koko'); 
  }
});

わからないこと

①現状のコードでも、元の場所に移動できますが
本来やりたいコードはもっと複雑なため
イメージとしては....
「移動　→　移動」ではなく「移動　→　復元」のようにできないかなと思っています。

②また、現状「.moveParent」を残していますが
できればSPの時（子要素がない時）はremoveしたいと思っています。
元の位置に移動する際に.wrapなどで処理すればいいかなと思っていますが
これも良い案があれば教えていただきたいです。

前提として、PCSP同じDOM構造で再現できないデザイン要件は避けるべきだとは
存じておりますが、またPCとSPでDOM自体を分けるなども検討しましたが
運用上こちらの方が手間が少なそうなため教えていただきたいです。

Comments

[jun68ykt]

ご質問①の要件を確認させてください。

> 「移動　→　復元」のようにできないかなと思っています。

とのことですが、復元とは、「元の状態に復旧させる」という意味だと思いますが、このご質問で、元の状態に相当するのが、ご質問に挙げられているHTMLであるという解釈でよいのでしょうか？

あるいは、元の状態に相当するHTMLは、ご質問に挙げられているHTMLとは別のもので、その元の状態に相当するHTMLを回答することも、このご質問では求められているという解釈でよいのでしょうか？

[decteckaaaaaaaa]

ご確認ありがとうございます。

>復元とは、「元の状態に復旧させる」という意味だと思いますが、このご質問で、元の状態に相当するのが、ご質問に挙げられているHTMLであるという解釈でよいのでしょうか？
上記で間違いありません。

>元の状態に相当するHTMLは、ご質問に挙げられているHTMLとは別のもの
ややこしく失礼しました。
実際に実装したいHTMLは別物になりますが、かなり複雑なため
質問用に簡易的なHTMLサンプルを用意させていただきました。

Answer 1

.moveを.koko pの後ろに持ってきて.moveParentを削除する場合
逆の手順は.kokoの後ろにmoveParentクラスをつけたdivを新たにつくって
その中に.moveをappendすることになります

あとは、文字通り取っておいて戻す

<script>
$(function(){
  $('section').attr('data-html',function(){return escape($(this).html());});
  $('#idou').on('click',function(){
    console.log($('section').prop('outerHTML'));
    $('.koko').append($('.move'));
  });
  $('#modosu').on('click',function(){
    $('section').html(function(){return unescape($(this).data('html'));});
  });
});
</script>
<section>
test
<div class="koko">
<p>この下に移動してくる</p>
</div>
test
<div class="moveParent">
<ul class="move">
<li>移動したい1（元に戻したい）</li>
<li>移動したい2（元に戻したい）</li>
</ul>
</div>
test
</section>
<input type="button" value="移動" id="idou">
<input type="button" value="戻す" id="modosu">

Comments

[decteckaaaaaaaa]

ご回答ありがとうございます！まさにこれがやりたかったです！

浅識で恐縮なのですがスクリプト部分、処理の詳細を教えていただきたく、、、
具体的にどういったことを行っているのでしょうか？？

$('section').attr('data-html',function(){
　return escape($(this).html());　
});
↑①section内のhtml情報を取得する？

$('#idou').on('click',function(){
　console.log($('section').prop('outerHTML'));
$('.koko').append($('.move'));
});
↑②ここは単純に.kokoの後ろにmoveを移動させている

$('#modosu').on('click',function(){
　$('section').html(function(){
　　return unescape($(this).data('html'));
　});
});
↑③元に戻す

data-htmlを取得することで、元々のDOM情報を取得することができる。
そして、escapeで保存することができる。
unescapeすることで、escapeで保存したDOM情報を適用する

という処理になるでしょうか？