javascript - "Cut and Paste"- 使用 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() .