Solution: Using nextElementSibling

So how did it go? 0:00 Were you able to write a feature that lets users move a list item down, 0:00 just as they're able to move them up? 0:04 Even if you wrote some parts, that still good. 0:06 So now I'm gonna show you what I did. 0:08 This solution turned out to be very similar to the one that moved 0:11 list items upwards in the list, with a few subtle differences. 0:14 So I started by adding down buttons to index.html, then in app.js, 0:18 I copied the up button's handler below itself to provide a basic template, 0:23 and changed the condition to check if the target's class name is down. 0:28 Now, I still needed the list item and its parent, so I left those lines alone. 0:34 But to move the target list item down, 0:40 I needed the next sibling rather than the previous one. 0:43 So I created this nextLi variable, and used li.next.ElementSibling. 0:46 So this if statement ensures I only try to move the list item down if it 0:53 isn't the last child of the ul. 0:58 But if it is the last child, the variable nextLi would be null, and 1:01 the code in the if statement wouldn't run. 1:06 This was a little tricky because as I mentioned earlier, 1:08 there is no insert after method. 1:11 So to use insert before, the next sibling becomes the element we want to move, 1:13 and we want to put it before the target list item, 1:18 which is used as the reference node here in the insertBefore method. 1:22 This still accomplishes the move we want to make, but 1:26 it requires us to sort of reverse our thinking in a way. 1:28 Testing this in the browser, 1:32 clicking the down button gives us the behavior we're going for. 1:35 And if the element we want to move is the last item in the list, 1:38 nothing happens, great. 1:42 All right so our little list building app is starting to take shape. 1:43 As we've been adding to it, there are a few issues with it though. 1:48 So in the next video, we'll tackle some of these issues and refactor our code, 1:51 I'll see you there. 1:54