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

Lucas Herlitz
Lucas Herlitz
2,998 Points
Posted by Lucas Herlitz
Lucas Herlitz
2,998 Points

I came up with a different solution than the instructor demonstrated. It appears to work. Is this method acceptable?

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);
      }      
    }

The goal was to create a button that would move an item down in a list. The instructor used 

ul.insertBefore(nextLi, li);

where I used

ul.insertBefore(li, nextLi.nextElementSibling);

Is this a case where both are okay solutions or did the one I use possibly create problems that I'm not seeing?

1 Answer

Steven Parker
Steven Parker
231,271 Points
Steven Parker
Steven Parker
231,271 Points

The "nextLi" might be the bottom one, so it might not have a next sibling. It's relying on the attribute returning a "null" value in that case, and the behavior of the function to place the element at the end when the reference is null.

While that does work, it's more verbose, and the functionality might not be as clear to a reader as the original example which always uses a valid element reference.