“Couper et Coller” - déplacement de nœuds dans les DOM avec Javascript

J'ai un code html qui ressemble à peu près comme 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 n'y a plus que ça, mais c'est l'idée de base. Ce dont j'ai besoin pour faire est de modifier l'emplacement de stockage de #id2 et #id3, de sorte que le résultat est:

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

Personne ne sait d'une fonction (je suis sûr que je ne suis pas la première personne à besoin de cette fonctionnalité) qui peut lire et écrire les deux nœuds (et leurs enfants), de façon à troquer leur emplacement dans les DOM?

InformationsquelleAutor user41435 | 2008-11-27
  1. 51

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

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

    InformationsquelleAutor Greg
  2. 0

    Cette fonction prend tout nœud qui est passé en elle et l'enveloppe avec le tag donné. Dans l'exemple de fragment de code j'ai enroulé une balise span avec un tag section.

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

    JS:

    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");

    HTML:

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

    InformationsquelleAutor zfrisch