Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Brian Ball
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brian Ball
Treehouse Project Reviewer

nextElementSibling

if (event.target.className == 'down') {
    let li = event.target.parentNode; // because we want to move up... prev sibling
    let nextLi = li.nextElementSibling;
    let ul = li.parentNode;
      if (nextLi) {
      ul.insertBefore(li, nextLi);
      }
    }

When the event of clicking the down button occurs, the list item to go down? What am I doing wrong?

2 Answers

Aakash Srivastav
seal-mask
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,621 Points

Hey Brian , suppose in your example , 'li' is at second position and 'nextLi' is at first position (as 'nextLi' is above 'li'). So , what you are doing is extracting 'li' and 'nextLi' and putting 'li' and 'nextLi' at the same postion where they were initially .
In order to bring 'nextLi' which is at first position down to second position , you have to insert it before 'li' .
So , you just need to replace your 'li' with 'nextLi' and 'nextLi' with 'li' within 'insertBefore' method .

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

Hope it helps :)
Happy Coding

Thank You Aakash it helped!!