我有大致如下所示的 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 中的位置的函数（我确定我不是第一个需要此功能的人）？
在这种情况下，document.getElementById('id1').appendChild(document.getElementById('id2'));应该解决问题。
更一般地，您可以使用insertBefore().
这个函数接受任何传入它的节点，并用给定的标签包装它。在示例代码片段中，我用 section 标签包裹了一个 span 标签。
function wrap(node, tag) {
node.parentNode.insertBefore(document.createElement(tag), node);
node.previousElementSibling.appendChild(node);
}
您可以使用
insertAdjacentElement而不是appendChild更好地控制元素相对于目标元素的位置。
语法：targetElement.insertAdjacentElement(position, element). 它有四个位置代码：
它显示为：
//beforebegin
<p>
//afterbegin
foo
//beforeend
</p>
//afterend
在您的情况下，您可以将代码编写为：
document.getElementById('id2').insertAdjacentElement('beforebegin', document.getElementById('id3'));
请注意，通过这种方式，您不需要引用父（容器）元素！
还要考虑您的元素比 id2、id3 多，例如：id4、id5、id6。现在，如果你想在 id2 之后重新定位例如 id5，它很简单：
function changePosition() {
document.getElementById('id2').insertAdjacentElement('afterend', document.getElementById('id5'));
}<div id='container'>
<div id='id1'>id1</div>
<div id='id2'><u>id2</u></div>
<div id='id3'>id3</div>
<div id='id4'>id4</div>
<div id='id5'><b>id5</b></div>
<div id='id6'>id6</div>
</div>
<p><input type='button' onclick="changePosition()" value="change position"></p>