web-dev-qa-db-fra.com

"Couper et coller" - déplacer des nœuds dans le DOM avec Javascript

J'ai un code HTML qui ressemble à peu près à ceci:

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

Évidemment, il y a plus que cela, mais c'est l'idée de base. Ce que je dois faire est de changer l'emplacement de # id2 et # id3, le résultat est donc:

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

Est-ce que quelqu'un connaît une fonction (je suis sûr que je ne suis pas la première personne à exiger cette fonctionnalité) qui peut lire et écrire les deux nœuds (et tous leurs enfants) afin de permuter leur emplacement dans le DOM?

javascriptdom
32
user41435

Dans ce cas, document.getElementById('id1').appendChild(document.getElementById('id2')); devrait faire l'affaire.

Plus généralement, vous pouvez utiliser insertBefore().

50
Greg

Cette fonction prend n'importe quel noeud qui y est passé et l'enveloppe avec la balise donnée. Dans l'exemple de fragment de code, j'ai enveloppé une balise span avec une balise de 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>
0
zfrisch