Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript JavaScript and the DOM (Retiring) Traversing the DOM Solution: Using nextElementSibling

Posted by Jesse Vorvick
Jesse Vorvick
6,047 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);
      }
    }

1 Answer

Diana Le
Diana Le
6,794 Points
Diana Le
Diana Le
6,794 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);
      }
    }