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

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().

Answer 2

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

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>