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 Challenge: Using nextElementSibling

Brian Ball
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Brian Ball
Treehouse Project Reviewer
Posted by Brian Ball
.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,638 Points
Aakash Srivastav
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 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

remon
remon
10,620 Points

Thank You Aakash it helped!!