Javascript 将元素从一个div移动到另一个div

假设我有这个结构

 <div class="firstDiv">
  <div class="insideDiv"></div>
 </div>
 <div class="secondDiv"></div>
 <div class="thirdDiv"></div>

如何将

.insideDiv

从

.firstDiv

移动到

.thirdDiv

，但通过

.secondDiv

---

我只需要一个提示或一个想法。谢谢大家!

如果您不介意使用jquery：

   <div class="firstDiv">
      <div class="insideDiv">InsideBaseball</div>
   </div>
   <div class="secondDiv">SecondBase</div>
   <div class="thirdDiv">ThirdBase</div>
     <button id="SwapButton"> Swap! </button>  


<script>

document.getElementById("SwapButton").onclick = function () { 
    var content = $('.insideDiv').html();
    var content2 = $('.thirdDiv').html();
    $('.thirdDiv').replaceWith(content);
    $('.insideDiv').replaceWith(content2);
  };
</script>

内壁球
二垒
第三数据库
交换
document.getElementById（“SwapButton”）.onclick=function（）{
var content=$（'.insideDiv'）.html（）；
var content2=$（'.thirdDiv'）.html（）；
$（'.thirdDiv'）。替换为（内容）；
$（'.insideDiv'）。替换为（content2）；
};

---

如果您不介意使用jquery：

   <div class="firstDiv">
      <div class="insideDiv">InsideBaseball</div>
   </div>
   <div class="secondDiv">SecondBase</div>
   <div class="thirdDiv">ThirdBase</div>
     <button id="SwapButton"> Swap! </button>  


<script>

document.getElementById("SwapButton").onclick = function () { 
    var content = $('.insideDiv').html();
    var content2 = $('.thirdDiv').html();
    $('.thirdDiv').replaceWith(content);
    $('.insideDiv').replaceWith(content2);
  };
</script>

内壁球
二垒
第三数据库
交换
document.getElementById（“SwapButton”）.onclick=function（）{
var content=$（'.insideDiv'）.html（）；
var content2=$（'.thirdDiv'）.html（）；
$（'.thirdDiv'）。替换为（内容）；
$（'.insideDiv'）。替换为（content2）；
};

---

在vanilla JS中，它的工作原理如下：

var moveIt=function（）{
var outerDiv=document.getElementsByClassName（'insideDiv'）[0].parentElement；
var innerDiv=document.getElementsByClassName（'insideDiv'）[0]；
if（outerDiv.nextElementSibling！=null）{
outerDiv.nextElementSibling.appendChild（outerDiv.removeChild（innerDiv））；
}
}

.firstDiv{
背景颜色：黄色
}
第二组{
背景颜色：浅蓝色
}
蒂尔迪夫先生{
背景色：浅粉色
}

第一
内分区
第二
第三
快点在vanilla JS中，它的工作原理如下：


var moveIt=function（）{
var outerDiv=document.getElementsByClassName（'insideDiv'）[0].parentElement；
var innerDiv=document.getElementsByClassName（'insideDiv'）[0]；
if（outerDiv.nextElementSibling！=null）{
outerDiv.nextElementSibling.appendChild（outerDiv.removeChild（innerDiv））；
}
}
.firstDiv{
背景颜色：黄色
}
第二组{
背景颜色：浅蓝色
}
蒂尔迪夫先生{
背景色：浅粉色
}

第一
内分区
第二
第三
快点你所说的“经历”是什么意思？你能提供你编写的任何代码来尝试这一点吗？预计你至少会尝试自己编写这一代码。堆栈溢出不是代码编写服务。我建议你做一些，或者通过谷歌，或者通过搜索，尝试一下。如果仍然有问题，请返回代码并解释您的尝试。
.addEventListener（）
+
.querySelector（）
+（
.appendChild（）
或
.insertAdjacentElement（）
）@danielbiceanu将一个元素放置/移动到另一个元素的顶部，您可以将可移动元素的位置设置为绝对，以便将其从正常文档流中取出。似乎你正在尝试做一些困难的事情，但没有首先掌握基本知识。你所说的“经历”是什么意思？你能提供你编写的任何代码来尝试吗？你至少应该尝试自己编写代码。堆栈溢出不是代码编写服务。我建议你做一些，或者通过谷歌，或者通过搜索，尝试一下。如果仍然有问题，请返回代码并解释您的尝试。
.addEventListener（）
+
.querySelector（）
+（
.appendChild（）
或
.insertAdjacentElement（）
）@danielbiceanu将一个元素放置/移动到另一个元素的顶部，您可以将可移动元素的位置设置为绝对，以便将其从正常文档流中取出。您似乎试图在不掌握基本知识的情况下做一些困难的事情。我将使用
document.querySelector（）
而不是使用内联事件处理程序。@hungerstar:谢谢您的评论，我想知道您选择.querySelector（…）（…而不是.getElementsByCassName（…）[0]的原因是什么我猜？）因为它更灵活。您可以在
querySelecotr（）
和
querySelectorAll（）中使用任何CSS选择器。我也不会像您使用
getElementsByClassName（）
那样两次查询DOM。FWIW我会使用
document.querySelector（）
，而不会使用内联事件处理程序。@hungerstar:谢谢您的评论，我想知道您选择.querySelector（…）（…而不是.getElementsByClassName（…）[0]的原因是什么？）因为它更灵活。您可以在
querySelecotr（）
和
querySelectorAll（）中使用任何CSS选择器。我也不会像您使用
getElementsByClassName（）
那样两次查询DOM。有趣的是，您建议使用jQuery，但选择
getElementById（）。onclick
。为什么不在（'click'，function（）{}）
上进行完整的jQuery查询（'click'，function（）{}），因为我是一个彻头彻尾的傻瓜。非常清晰的答案，谢谢。有趣的是，您建议使用jQuery，但选择了
getElementById（）。单击
。为什么不在（'click'，function（）{}）
上进行完整的jQuery查询（'click'，function（）{}），因为我是一个彻头彻尾的傻瓜。非常干净的回答，谢谢。