"Вырезать и вставить" - перемещение узлов в DOM с помощью Javascript

У меня есть 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?

Ответ 1

В этом случае document.getElementById('id1').appendChild(document.getElementById('id2')); должен выполнить трюк.

В более общем плане вы можете использовать insertBefore().

Ответ 2

Эта функция принимает любой node, который передается в нее и обертывает ее указанным тегом. В фрагменте кода кода я завернул тег span тегом раздела.

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

function wrap(node, tag) {
  node.parentNode.insertBefore(document.createElement(tag), node);
  node.previousElementSibling.appendChild(node);
}
let toWrap = document.querySelector("#hi");
wrap(toWrap, "section");
console.log(document.querySelector("section > #hi"), " section wrapped element");

<span id="hi">hello there!</span>