ボタンをクリックする度に
[#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()のようにクリックする度に
要素を移動したり戻したりする方法はありますでしょうか?
ご教示いただけるとありがたいです。
どうぞよろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー