Need to move a div that does not have any unique identifiers in front of another div that does not have any unique identifiers. However, the children divs do have unique identifiers.
Starting:
<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>
I’d like to move the parent of the child3 div after the parent of the child2 div. The result should look like:
<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>
Any ideas?
I’ve looked into jQuery prependTo() and appendTo(), in combination with parent(), but I can’t get seem to get them to work properly.
Edited for more context. In my original posting, swap would have worked, but the divs are in different containers, and I’d like to move the parent div of child3 without swapping it with another div.
2
Answers
from your child, you take parentnode, and you swap the nodes.
new snippet regarding changes you made in your exemple.
That’s really following structure you gave in exemple: moving the node inside (1 level) div parent.
It’s using insertAdjacentElement, you can check here :
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement