如何移动元素从一个div移动到另一个div并能够返回到主div

<div id="mainDiv">
  <div id="sourceDiv">源div</div>
  <div id="targetDiv">目标div</div>
</div>

var sourceDiv = document.getElementById("sourceDiv");
var targetDiv = document.getElementById("targetDiv");

sourceDiv.addEventListener("click", moveElement);

function moveElement() {
  targetDiv.innerHTML = sourceDiv.innerHTML;
  sourceDiv.innerHTML = "";
  sourceDiv.removeEventListener("click", moveElement);
  targetDiv.addEventListener("click", returnElement);
}

function returnElement() {
  sourceDiv.innerHTML = targetDiv.innerHTML;
  targetDiv.innerHTML = "";
  targetDiv.removeEventListener("click", returnElement);
  sourceDiv.addEventListener("click", moveElement);
}