Using previousElementSibling and insertBefore

In the last video, you saw how the parentNode property 0:00 holds a reference to the parent node of a given element. 0:03 But there's also a reference to the previous sibling 0:06 stored in the previous element sibling property. 0:09 In the MDN page for previous element sibling, 0:12 the first thing that's probably catching your eye is non document type child node. 0:15 It's a big name, but don't worry too much about it. 0:19 You can click over on the left to read more about it. 0:22 And for now, you can think of it as a big name for the element object. 0:25 Now the other question you might be having is why is element in the property name? 0:28 We just learned about parent node, not parent element node. 0:33 So why isn't this just called previousSibling? 0:37 Well, there is a previousSibling property, which is older and 0:40 has better browser support than previousElementSibling. 0:43 However, the reason for 0:46 avoiding previousSibling will be easier to see in the console. 0:48 So let's hop over to the browser where our project is loaded, and 0:51 let's declare a variable li and store a reference to the last list item. 0:55 The one that contains plums. 1:01 Now let's just type li in the console to see that element, 1:11 then we can hover over it to highlight it on the page. 1:15 So now type li.previousSibling in the console, 1:20 and we see that it contains something called #text. 1:26 Now if we hover over that nothing is highlighted. 1:31 So now I'm just going to tap the up arrow to get this command back but 1:34 this time let's examine its text content property. 1:38 And here we see that it's an empty two line string. 1:43 So let's do one more thing. 1:47 I'm going to tap the up arrow twice and 1:48 look at the previous sibling of the list items previous sibling. 1:51 And I get anther List item and 1:59 hovering over it I see that it's the one with the lavender inside. 2:01 So what's going on here? 2:06 Well previousSibling gets you the previous document node, 2:07 which isn't necessarily an HTML element. 2:11 In this case, it's an empty string that sits between the two list items, and 2:14 helps to format the HTML document itself. 2:18 So, since you can't count on previousSibling to give you the previous 2:21 HTML element previous element sibling is the way to go. 2:26 And if you want more information about this, 2:29 I've included in the teacher's notes. 2:31 So now let's see previous element sibling in action. 2:34 Let's implement an up button next to each element, and 2:37 clicking on the up button will move that element up the list. 2:40 First, let's modify index.html, so 2:45 I'm going to break these list items into separate lines to make them more readable. 2:47 Then I'll copy the top button, 3:00 paste a new one above it and change its text to up. 3:03 So now that we have multiple buttons here, let's put classes on each one so 3:10 we can differentiate them in our handler. 3:14 I'll give the first button the class up, and the second button the class remove. 3:16 Next, I'll l do the same for 3:24 the other elements by simply copying and pasting in the two buttons. 3:26 Next, over in ap.js we'll need to modify our click handler 3:35 to only remove an element if the target's class name is removed. 3:40 So we can use an if statement for that. 3:45 Within this if block, I'll wrap the references to the list items and 3:47 parent ul in an if statement. 3:52 Then in the condition we'll check the target's class name by saying If event. 4:03 target.className == 'remove'). 4:08 So next clicks to our new up buttons will come into this handler, too. 4:17 So we just need to set a similar if statement to check for the up class name. 4:22 But, once we make our selections, 4:26 how will we rearrange the DOM to move our target element into place? 4:28 So far, we've only learned about append child which places the node as the last 4:32 sibling of an element's children. 4:36 So for this, we can use the insertBefore method, 4:39 which inserts a node before a referenced element. 4:42 Looking at the syntax for 4:46 insert before, it shows we need three nodes to use this method. 4:48 We'll call the method on the parentNode, passing in two arguments. 4:53 The first argument is the new element, or the element we want to place, and 4:58 the second argument is the reference element, or 5:02 the element we want our new node to go before. 5:05 Now, there are a couple of things to note here. 5:08 One is that if the element you want to place is already in the DOM, 5:10 you don't need to remove it first. 5:14 That will be taken care of for you before the element is moved into place. 5:16 And the other thing to note is that there is no such thing as 5:20 the insertAfter method. 5:22 But you'll see how to handle that functionality soon. 5:24 So let's switch back to our code, and we can begin by copying and 5:27 pasting this if statement for the remove method right below itself. 5:30 Then we can modify this code to handle clicks to our new up buttons. 5:37 So this condition will check if the targets class name Is up. 5:41 And we'll still need to get a reference to the parent of the button, the list item, 5:49 and we'll also need the parent of that, the ul element, so 5:53 we'll will keep these lines of code, but we're not removing a child here so, 5:56 I'll delete the removeChild method from this block. 6:01 And since we want to move the target list item up, we will need to get its 6:05 previous sibling as a reference which we can get with previous element sibling. 6:10 So we'll declare a new variable of prevLi and 6:15 say Li.previousElementSibling. 6:18 And then we'll call insert before, on the unordered list element, 6:26 passing in the list item to move, and the previous sibling reference. 6:31 All right, let's save the file and test this in the browser. 6:46 I'll refresh the page, and there we see the up buttons. 6:50 I'll click up, and it looks like it's working. 6:54 But watch what happens when we click the up button at the top of the list. 7:00 It goes to the bottom. 7:05 Well, this is because of how insert before works. 7:07 And we can fix this with an if statement. 7:10 So if an element is already a first child, the previous element sibling will be null. 7:13 So we can test that null value in an if statement, by saying if (prevLi), 7:20 Run this ul.insertBefore method. 7:31 And now, the insert will run only if there's a previous sibling. 7:35 Saving a file and switching back to the browser, 7:39 It looks like we're now getting the expected behavior. 7:45 Great. 7:48