This course will be retired on February 12, 2022. We recommend "JavaScript and the DOM" for up-to-date content.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
This video covers a solution to the "Using nextElementSibling" challenge.
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
You need to sign up for Treehouse in order to download course files.
Sign up