JavaScript JavaScript and the DOM Traversing the DOM Solution: Using nextElementSibling

Jesse Vorvick
Jesse Vorvick
Full Stack JavaScript Techdegree Student 4,459 Points

Alternative Solution

Here was my solution. I don't recommend it. But it works, so I thought I would share it here in case it could be educational as something to study.

Essentially, I was focused on getting li itself to move. In the teacher's solution is better, because it is more efficient, even though it is not actively moving the clicked element down (but gives the illusion that it is). Anyway, here is the literal, and unnecessarily messy version:

  if (event.target.className === 'down') {
      let li = event.target.parentNode;
      if (li.nextElementSibling) {
        let nextNextLi = li.nextElementSibling.nextElementSibling;
        let ul = li.parentNode;
        ul.insertBefore(li, nextNextLi);
      }
    }
Diana Le
Diana Le
6,793 Points

I also did something with chaining the nextElementSibling method. I was curious what would happen if there is no next next Element Sibling but on the front-end it's still moving the second-to-last list item down.

if (event.target.className == 'down') {
      let li = event.target.parentNode;
      let nextLi = li.nextElementSibling;
      let ul = li.parentNode;
      if (nextLi) {
        ul.insertBefore(li, nextLi.nextElementSibling);
      }
    }