如何在复选框选中时将div移到其父目录的顶部？

<div id="parentDiv">
  <div class="moveableDiv">
    <!-- div内容 -->
  </div>
  <input type="checkbox" id="checkbox" />
  <label for="checkbox">选中时移动div</label>
</div>

.moveableDiv {
  /* div样式 */
}

#parentDiv {
  /* 父div样式 */
  position: relative;
}

const checkbox = document.getElementById('checkbox');
const parentDiv = document.getElementById('parentDiv');
const moveableDiv = document.querySelector('.moveableDiv');

checkbox.addEventListener('change', function() {
  if (checkbox.checked) {
    parentDiv.insertBefore(moveableDiv, parentDiv.firstChild);
  }
});