&引用；剪贴使用Javascript在DOM中移动节点

我的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>

一些html

也许更多
这里有不同的文字

甚至可能是一个表单项

很明显，事情远不止这些，但这是最基本的想法。我需要做的是切换#id2和#id3的位置，因此结果是：

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

...
...

---

有人知道一个函数（我肯定我不是第一个需要这个功能的人）可以读写两个节点（及其所有子节点）以便交换它们在DOM中的位置吗？

在本例中，

document.getElementById（'id1'）.appendChild（document.getElementById（'id2'）应该可以做到这一点

更一般地说，您可以使用。
此函数接受传入其中的任何节点，并用给定的标记将其包装起来。在示例代码片段中，我用一个section标记包装了一个span标记

function wrap(node, tag) {
  node.parentNode.insertBefore(document.createElement(tag), node);
  node.previousElementSibling.appendChild(node);
}


函数换行（节点、标记）{
node.parentNode.insertBefore（document.createElement（标记），节点）；
node.previousElementSibling.appendChild（节点）；
}
让toWrap=document.querySelector（“#hi”）；
包裹（拖带，“部分”）；
console.log（document.querySelector（“section>#hi”），“section wrapped元素”）
你好
.prepend（）
可能也是一些人想要的。下面是一些更有用的方法。