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
polentz
Full Stack JavaScript Techdegree Student 11,755 Pointsit 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
231,269 PointsThe 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 
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
Full Stack JavaScript Techdegree Student 11,755 Pointsoh ok, I should have checked it earlier. That's why it works :) Thanks a million!
Steven Parker
231,269 PointsGlad to help, and happy coding!
polentz
Full Stack JavaScript Techdegree Student 11,755 PointsThinking 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
231,269 PointsAccording 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.
polentz
Full Stack JavaScript Techdegree Student 11,755 Pointspolentz
Full Stack JavaScript Techdegree Student 11,755 PointsThanks 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!