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

What is the point of "if (nextLi)"?

I did it without the extra if statement, and my code worked just fine.

    if (e.target.className == 'move-down') {
      let li = e.target.parentNode;  
      let nextLi = li.nextElementSibling;
      let ul = li.parentNode;
      ul.insertBefore(nextLi, li);

Even when you click the "down" button next to the final list item, it doesn't move, as expected.

1 Answer

Steven Parker
Steven Parker
229,967 Points

Without it your script will be causing errors.

Obviously, the final item cannot move down, because there's no lower spot to go to. But by removing the test, your code will attempt to move it and will fail and cause errors.

Try opening the console in your browser's developer tools and watch while you click the down button.

There may be no behavioral difference in your current browser, but a different one (or a future version) might permanently deactivate an event handler that causes errors.

6,762 Points

You're right. :) Below is the error without if statement.

app.js:30 Uncaught TypeError: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'.
    at HTMLUListElement.listUl.addEventListener (app.js:30)