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

this video is something wrong because of nextLi= li.nextElementSibling then ul.insertBefore(nextLi,li) is the same. so

so it is the same. I think we should use afterNextLi = nextLi.nextElementSibling then ul.insertBefore(afterNextLi, li) that will make sense

2 Answers

Owen Bell
Owen Bell
8,060 Points

I think you're a bit confused as to how the .insertBefore method works. Check the MDN documentation for more clarification. You should see the following syntax template:

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

The first parameter of .insertBefore specifies the element to be moved; the second specifies the element that the first is to be inserted before.

Guil's code selects the list item whose 'Down' button was clicked and stores it in the li variable, then selects the next list item (if it exists) and stores that in the nextLi variable (undefined if no next item exists). Finally, he selects the entire list and stores it in ul. The conditional statement then checks if nextLi is truthy; in other words, does a next list element exist, or is the element stored in li the final list item? If there is a next item, the following code block runs:

ul.insertBefore(nextLi, li);

This removes the next list element from its current position and inserts it before the list item whose 'Down' button was clicked - the result of this is that the next list item moves upwards whilst the clicked item moves downwards.

thank you verry much I am sorry about that