Changing the order of elements

by

For this simple case (swapping the only two elements), you can just use appendChild():

(() => {
  const list = document.querySelector("ul");
  list.appendChild(list.firstElementChild);
})();
<ul>
  <li>List-item #1</li>
  <li>List-item #2</li>
</ul>

The same node cannot exist in multiple positions; so, it’s removed from its current position and placed at the end of the collection.

If you want to do more complicated sorting, you probably ought to create an array from the childNodes and get all crazy:

(() => {
  const frag = document.createDocumentFragment();
  const list = document.querySelector("ul");
  const items = list.querySelectorAll("li");
  const sortedList = Array.from(items).sort(function(a, b) {
    const c = a.textContent,
      d = b.textContent;
    return c < d ? -1 : c > d ? 1 : 0;
  });
  for (let item of sortedList) {
    frag.appendChild(item);
  }
  list.appendChild(frag);
})();
<ul>
  <li>Dogs</li>
  <li>Snakes</li>
  <li>Cats</li>
  <li>Bugs</li>
</ul>

More Related Contents:

  1. Trying to use Javascript to add new li element to my ordered list, anyone know why this code isn’t working?
  2. Do DOM tree elements with IDs become global properties?
  3. How to make JavaScript execute after page load?
  4. Changing website favicon dynamically
  5. How do I programmatically set the value of a select box element using JavaScript?
  6. Dynamically set value of a file input [duplicate]
  7. Check if an element contains a class in JavaScript?
  8. How to correctly iterate through getElementsByClassName
  9. Appending HTML string to the DOM
  10. How to append text to a “?
  11. Best Practice: Access form elements by HTML id or name attribute?
  12. Difference between Node object and Element object?
  13. Why are duplicate ID values not allowed in HTML?
  14. HTML “overlay” which allows clicks to fall through to elements behind it [duplicate]
  15. JavaScript get element by name
  16. jQuery: how to change tag name?
  17. How do you listen / detect changes to an input value – when the input value is changed via javascript?
  18. Add elements to the DOM given plain text HTML using only pure JavaScript (no jQuery)
  19. How do I put codes from jsfiddle.net into my website?
  20. Focus Input Box On Load
  21. Screen Scraping from a web page with a lot of Javascript [closed]
  22. Why does JavaScript navigator.appName return Netscape for Safari, Firefox and Chrome?
  23. Attach event listener through javascript to radio button
  24. window.getSelection() gives me the selected text, but I want the HTML
  25. Is there a flexible way to modify the contents of an editable element?
  26. a way to check validity of HTML5 forms?
  27. Open new window without focus on it [duplicate]
  28. Is there a way to get innerText of only the top element (and ignore the child element’s innerText)?
  29. How can I remove wrapper (parent element) without removing the child?
  30. window.getSelection return html [duplicate]

Leave a Comment