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

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

it does not make sense to me (yet) how it works they way the teacher used the insertBefore() method.

in the solution video 'Using nextElementSibling' the author called the insertBefore() method this way: ul.insertBefore(nextLi, li) where the ul is parent element of all <li> items, and the nextLi argument, according to the MDN documentation is supposed to be the node to be inserted, and the li argument is the node before which newNode, in this case nextLi is inserted.

this is my snippet how I solved it and it works:

if(event.target.className === 'down'){
      //select the li that matches the button clicked 
      //event.target is the button 'down' clicked nested inside li
      let li = event.target.parentNode;

     //I select the li that is two positions down from the current li targeted when clicked the button
      let nextLi = li.nextElementSibling.nextElementSibling;

      //to use insertBefore i need to select the parent element of the li
      let ul = li.parentNode;

      //insert the li before the second li down the list 
      ul.insertBefore(li,nextLi);
    }           

as you can see, in the insertBefore() method, I used the arguments inverted, as logically I think to the li argument passed to the insertBefore as the element I need to insert before something, and that something is the nextLi element.

can anyone kindly help me to understand why both solution works? thanks in advance

3 Answers

Steven Parker
Steven Parker
221,450 Points

The reason it works in the video with the arguments the other way is because by (re)inserting the following element (nextLi) before this one, it effectively moves the position of the current one (li) down :arrow_down:.

It's perhaps more accurate to say that it moves the position of the next one up, but the relative change in positions is the same.

This alternate version works because you are selecting the sibling two away to insert before. And when the element you need to move is currently at the second-to-last position, you get a null instead of the other element. When the reference node is null, insertBefore adds the specified node to the end of the list of children of the specified parent node (it basically becomes "appendChild").

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

Thanks Steven for your help. Yes it just logically thought as moving the nextLi up which results in the current li moving down.

It makes sense your comment about my code, in fact, clicking on the move down button of the second last item, it should not work, but for some reason it does! (have no idea why). Unfortunately I am working on my external code editor, so I just copied the snippet. the part that I posted is just the one I changed, the rest I left it as it was from the file I downloaded from the class. Thanks Steven!

Steven Parker
Steven Parker
221,450 Points

Glad to help, and happy coding!

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

Thinking about it, is it possible that, in the solution suggested by the teacher in the video it actually does not need the if statement? Mine works without it. Maybe when the nextLi is null, inserting null before an element it actually does not affect the DOM?

I am sorry if what I say does not make much sense, but I am trying to wrap my head around it to better understand the whole thing. Thanks in advance

Steven Parker
Steven Parker
221,450 Points

According to MDN:

If the reference node is null, the specified node is added to the end of the list of children of the specified parent node.

The video version could rely on this as well, but it's "good practice" to check if the position is already last and just not attempt to move it.