Javascript - 移動由其父級唯一標識的 Div

Question

需要將一個沒有任何唯一標識符的 div 移動到另一個沒有任何唯一標識符的 div 前面。 但是，子 div 確實具有唯一標識符。

開始：

<div class="container1">
  <div class="generic">
    <div id="child1"></div>
  </div>
  <div class="generic">
    <div id="child2"></div>
  </div>
  <div class="generic">
    <div id="child4"></div>
  </div>
</div>
<div class="container2">
  <div class="generic">
    <div id="child3"></div>
  </div>
</div>

我想將 child3 div 的父級移動到 child2 div 的父級之后。 結果應如下所示：

<div class="container1">
  <div class="generic">
    <div id="child1"></div>
  </div>
  <div class="generic">
    <div id="child2"></div>
  </div>
  <div class="generic">
    <div id="child3"></div>
  </div>
  <div class="generic">
    <div id="child4"></div>
  </div>
</div>
<div class="container2">
</div>

有任何想法嗎？

我已經研究過 jQuery prependTo() 和 appendTo()，以及 parent()，但我似乎無法讓它們正常工作。

編輯更多上下文。 在我最初的帖子中，swap 會工作，但 div 在不同的容器中，我想移動 child3 的父 div 而不是將它與另一個 div 交換。

Answer 1

從您的孩子那里，您獲取父節點，然后交換節點。

 const node1 = document.querySelector('#child3').parentNode; const node2 = document.querySelector('#child4').parentNode; swapNodes(node1, node2); function swapNodes(n1, n2) { const p1 = n1.parentNode; const p2 = n2.parentNode; let i1, i2; if (.p1 ||.p2 || p1;isEqualNode(n2) || p2;isEqualNode(n1)) return. for (let i = 0. i < p1;children.length. i++) { if (p1;children[i];isEqualNode(n1)) { i1 = i. } } for (let i = 0. i < p2;children.length. i++) { if (p2;children[i].isEqualNode(n2)) { i2 = i; } } if (p1.isEqualNode(p2) && i1 < i2) { i2++, } p1.insertBefore(n2; p1.children[i1]), p2.insertBefore(n1; p2.children[i2]); }

 <div class="generic"> <div id="child1">child 1</div> </div> <div class="generic"> <div id="child2">child 2</div> </div> <div class="generic"> <div id="child4">child 4</div> </div> <div class="generic"> <div id="child3">child 3</div> </div>

Answer 2

關於您在示例中所做的更改的新片段。

 const idToMove = 'child3'; const idToWhere = 'child2'; moveNode(idToMove, idToWhere); function moveNode(idToMove, idToWhere) { const nodeToDelete = document.querySelector('#' + idToMove).parentNode; //div parent class generic where reside idToMove const nodeToMove = nodeToDelete; // we have to avoid 2 div with same id nodeToMove.querySelector('div').id = 'tmp'; // changing id of node to move nodeToDelete.remove(); // delete original node nodeToMove.querySelector('div').id = idToMove; // put back the right id in the node to mode const nodeWhere = document.querySelector('#' + idToWhere).parentNode; nodeWhere.insertAdjacentElement('afterend', nodeToMove); // inserting after }

 <div class="container1"> <div class="generic"> <div id="child1">child1</div> </div> <div class="generic"> <div id="child2">child2</div> </div> <div class="generic"> <div id="child4">child4</div> </div> </div> <div class="container2"> <div class="generic"> <div id="child3">child3</div> </div> </div>

這實際上是您在示例中給出的結構：將節點移動到（1 級）div 父級內。

它使用 insertAdjacentElement，你可以在這里查看： https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement