"剪切和粘贴" - 使用Javascript在DOM中移动节点

Question

我的html代码看起来大致如下:

<div id="id1">
  <div id="id2">
    <p>some html</p>
    <span>maybe some more</span>
  </div>
  <div id="id3">
    <p>different text here</p>
    <input type="text">
    <span>maybe even a form item</span>
  </div>
</div>

显然还有更多的东西,但这是基本的想法.我需要做的是切换#id2和#id3的位置,结果是:

<div id="id1">
  <div id="id3">...</div>
  <div id="id2">...</div>
</div>

有没有人知道一个函数(我确定我不是第一个需要这个功能的人),它可以读取和写入两个节点(及其所有子节点),以便在DOM中交换它们的位置？

Answer 1

在这种情况下,document.getElementById('id1').appendChild(document.getElementById('id2'));应该做的伎俩.

更普遍的是你可以使用insertBefore().