In the last video, you saw how the parentNode property

holds a reference to the parent node of a given element.

But there's also a reference to the previous sibling

stored in the previous element sibling property.

In the MDN page for previous element sibling,

the first thing that's probably catching your eye is non document type child node.

It's a big name, but don't worry too much about it.

You can click over on the left to read more about it.

And for now, you can think of it as a big name for the element object.

Now the other question you might be having is why is element in the property name?

We just learned about parent node, not parent element node.

So why isn't this just called previousSibling?

Well, there is a previousSibling property, which is older and

has better browser support than previousElementSibling.

However, the reason for

avoiding previousSibling will be easier to see in the console.

So let's hop over to the browser where our project is loaded, and

let's declare a variable li and store a reference to the last list item.

The one that contains plums.

Now let's just type li in the console to see that element,

then we can hover over it to highlight it on the page.

So now type li.previousSibling in the console,

and we see that it contains something called #text.

Now if we hover over that nothing is highlighted.

So now I'm just going to tap the up arrow to get this command back but

this time let's examine its text content property.

And here we see that it's an empty two line string.

So let's do one more thing.

I'm going to tap the up arrow twice and

look at the previous sibling of the list items previous sibling.

And I get anther List item and

hovering over it I see that it's the one with the lavender inside.

So what's going on here?

Well previousSibling gets you the previous document node,

which isn't necessarily an HTML element.

In this case, it's an empty string that sits between the two list items, and

helps to format the HTML document itself.

So, since you can't count on previousSibling to give you the previous

HTML element previous element sibling is the way to go.

And if you want more information about this,

I've included in the teacher's notes.

So now let's see previous element sibling in action.

Let's implement an up button next to each element, and

clicking on the up button will move that element up the list.

First, let's modify index.html, so

I'm going to break these list items into separate lines to make them more readable.

Then I'll copy the top button,

paste a new one above it and change its text to up.

So now that we have multiple buttons here, let's put classes on each one so

we can differentiate them in our handler.

I'll give the first button the class up, and the second button the class remove.

Next, I'll l do the same for

the other elements by simply copying and pasting in the two buttons.

Next, over in ap.js we'll need to modify our click handler

to only remove an element if the target's class name is removed.

So we can use an if statement for that.

Within this if block, I'll wrap the references to the list items and

parent ul in an if statement.

Then in the condition we'll check the target's class name by saying If event.

target.className == 'remove').

So next clicks to our new up buttons will come into this handler, too.

So we just need to set a similar if statement to check for the up class name.

But, once we make our selections,

how will we rearrange the DOM to move our target element into place?

So far, we've only learned about append child which places the node as the last

sibling of an element's children.

So for this, we can use the insertBefore method,

which inserts a node before a referenced element.

Looking at the syntax for

insert before, it shows we need three nodes to use this method.

We'll call the method on the parentNode, passing in two arguments.

The first argument is the new element, or the element we want to place, and

the second argument is the reference element, or

the element we want our new node to go before.

Now, there are a couple of things to note here.

One is that if the element you want to place is already in the DOM,

you don't need to remove it first.

That will be taken care of for you before the element is moved into place.

And the other thing to note is that there is no such thing as

the insertAfter method.

But you'll see how to handle that functionality soon.

So let's switch back to our code, and we can begin by copying and

pasting this if statement for the remove method right below itself.

Then we can modify this code to handle clicks to our new up buttons.

So this condition will check if the targets class name Is up.

And we'll still need to get a reference to the parent of the button, the list item,

and we'll also need the parent of that, the ul element, so

we'll will keep these lines of code, but we're not removing a child here so,

I'll delete the removeChild method from this block.

And since we want to move the target list item up, we will need to get its

previous sibling as a reference which we can get with previous element sibling.

So we'll declare a new variable of prevLi and

say Li.previousElementSibling.

And then we'll call insert before, on the unordered list element,

passing in the list item to move, and the previous sibling reference.

All right, let's save the file and test this in the browser.

I'll refresh the page, and there we see the up buttons.

I'll click up, and it looks like it's working.

But watch what happens when we click the up button at the top of the list.

It goes to the bottom.

Well, this is because of how insert before works.

And we can fix this with an if statement.

So if an element is already a first child, the previous element sibling will be null.

So we can test that null value in an if statement, by saying if (prevLi),

Run this ul.insertBefore method.

And now, the insert will run only if there's a previous sibling.

Saving a file and switching back to the browser,

It looks like we're now getting the expected behavior.

Great.