【JavaScript】クリックする度に要素を移動したり元に戻したりしたい

Question

ボタンをクリックする度に
[#youso]の中身を[#idousaki]に移動したり、
元に戻したりしたいと思っています。

とりあえずは#yousoを#idousakiに複製し、
CSSで表示・非表示を切り替えてお茶を濁していますが、
複製ではなく移動をさせたいです。

<div id="idousaki"></div>
<div id="youso"><p>移動したい要素</p></div>
<div id="btn">クリックで移動</div>

<script>
var idousaki = document.querySelector('#idousaki');
var youso = document.querySelector('#youso');
var clone  = youso.cloneNode(true);
idousaki.appendChild(clone);
var btn = document.querySelector('#btn');

btn.addEventListener('click', function() {
  idousaki.classList.toggle('open');
}, false);
</script>

具体的には、「<div id="youso"><p>移動したい要素</p></div>」の中の
「<p>移動したい要素</p>」を「<div id="idousaki"></div>」の中に移動して、
以下のようにしたいです。

<div id="idousaki"><p>移動したい要素</p></div>
<div id="youso"></div>
<div id="btn">クリックで移動</div>

もう一度ボタンをクリックすると、以下のように元に戻したいです。

<div id="idousaki"></div>
<div id="youso"><p>移動したい要素</p></div>
<div id="btn">クリックで移動</div>

toggle()のようにクリックする度に
要素を移動したり戻したりする方法はありますでしょうか？

ご教示いただけるとありがたいです。
どうぞよろしくお願いいたします。

Comments

[kei344]

「移動」とはどのような操作でしょうか。具体的に例示していただけませんか？

[tetutetutetu]

メッセージありがとうございます。
追記いたしました。

Answer 1

toggleでする方法～

<div id="idousaki" class="ido">移動先</div>
<div id="youso">
  <p>移動したい要素</p>
</div>
<div id="btn">クリックで移動</div>

var idousaki = document.querySelector('#idousaki');
var youso = document.querySelector('#youso');
var yousoChild = document.querySelector('#youso p');
var btn = document.querySelector('#btn');

btn.addEventListener('click', function() {
  var ido = document.querySelector('.ido');
  idousaki.classList.toggle("ido");
  youso.classList.toggle("ido");
  ido.appendChild(yousoChild);
}, false);

Comments

[tetutetutetu]

ありがとうございます。移動できるようになりました！

Answer 2

どこまでのブラウザを対応したいかによります

<style>
#idousaki{color:red;}
#youso{color:yellow;}

</style>
<script>
/* IE 対応
if(!HTMLElement.prototype.closest){
  HTMLElement.prototype.closest=function(selector){
    var self=this;
    while(p=self.parentNode){
      if([].map.call(p.querySelectorAll(selector),function(x){
        return x;
      }).filter(function(x){
        return x===self;
      }).length>=1) return self;
      self=p;
    }
    return null;
  }
}
ここまで */

window.addEventListener('DOMContentLoaded', function(e){
  var idousaki = document.querySelector('#idousaki');
  var youso = document.querySelector('#youso');
  var youso_p = youso.querySelector('p');
  document.querySelector('#btn').addEventListener('click', function(e) {
    if(youso_p.closest('#youso')){
      idousaki.appendChild(youso_p);
    }else{
      youso.appendChild(youso_p);
    }
    });
});

</script>
<div id="idousaki"></div>
<div id="youso"><p>移動したい要素</p></div>
<div id="btn">クリックで移動</div>

Comments

[tetutetutetu]

ありがとうございます。参考にさせていただきます。