How to swap DOM child nodes in JavaScript?

by

There is no need for cloning. You can just move one node before the other. The .insertBefore() method will take it from its current location and insert it somewhere else (thus moving it):

childNode[4].parentNode.insertBefore(childNode[4], childNode[3]);

You get the parent of the node. You then call the insertBefore method on the parent and you pass it the childNode[4] node and tell it you want it inserted before childNode[3]. That will give you the result of swapping their order so 4 will be before 3 when it’s done.

Reference documentation on insertBefore.

Any node that is inserted into the DOM that is already in the DOM is first removed automatically and then inserted back so there is no need to manually remove it first.

More Related Contents:

  1. What is the difference between node.nextSibling and ChildNode.nextElementSibling?
  2. Trying to use Javascript to add new li element to my ordered list, anyone know why this code isn’t working?
  3. .prop() vs .attr()
  4. Do DOM tree elements with IDs become global properties?
  5. Why is setTimeout(fn, 0) sometimes useful?
  6. How to insert an element after another element in JavaScript without using a library?
  7. Find an element in DOM based on an attribute value
  8. Event when window.location.href changes
  9. Why is the DOMSubtreeModified event deprecated in DOM level 3?
  10. nodeValue vs innerHTML and textContent. How to choose? [duplicate]
  11. Best Practice: Access form elements by HTML id or name attribute?
  12. How do I do OuterHTML in firefox?
  13. Why are duplicate ID values not allowed in HTML?
  14. How to access CSS generated content with JavaScript
  15. React.js: onChange event for contentEditable
  16. jQuery DOM changes not appearing in view source
  17. JavaScript get element by name
  18. Accessing the content of other tabs in a browser
  19. Is there a way to select sibling nodes?
  20. How to detect when an iframe has already been loaded
  21. How do I put codes from jsfiddle.net into my website?
  22. JavaScript: How to get parent element by selector?
  23. Screen Scraping from a web page with a lot of Javascript [closed]
  24. What is better, appending new elements via DOM functions, or appending strings with HTML tags?
  25. Attach event listener through javascript to radio button
  26. Check whether HTML element has scrollbars
  27. Why is React’s concept of Virtual DOM said to be more performant than dirty model checking?
  28. Why doesn’t Node.js have a native DOM?
  29. Unloading/Removing content from an iFrame
  30. jQuery difference between :eq() and :nth-child()

Leave a Comment