javascript - 如何在 javascript 中交换 HTML 元素？

Question

我正在使用经典的 Javascript 编写 DOM 脚本，我在容器 DIV 中有一组 DIV。 在子 DIV 的点击事件中，我希望导致事件的子 DIV 与其上方的 DIV 交换。 我的代码放在这里..

 <div id="container">
        <div onclick="swapDiv(event);">1</div>
        <div onclick="swapDiv(event);">2</div>
        <div onclick="swapDiv(event);">3</div>
 </div>

如果 DIV 2 被点击，它应该与 DIV 1 交换

Answer 1

这段代码会做你想做的事(如果你想用第一个子元素交换选择)。如果您想要其他东西，则需要更加精确。

<script type="text/javascript">
  function swapDiv(event, elem) {
    elem.parentNode.insertBefore(elem, elem.parentNode.firstChild);
  }
</script>


<div id="container">
  <div onclick="swapDiv(event,this);">1</div>
  <div onclick="swapDiv(event,this);">2</div>
  <div onclick="swapDiv(event,this);">3</div>
</div>