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
Learn to get all children elements of a node, with the children property.
Along with the other properties
we've studied so far,
0:00
you can also get all children elements
of a node with the children property.
0:03
Similar to previous element sibling and
next element sibling,
0:07
children will return only HTML elements.
0:11
So let's have a look at our list app.
0:14
And see how we can make use
of the children property.
0:16
You may have noticed,
that when you add a new item to the list,
0:19
no buttons are placed on that item.
0:23
So this means that it can't be
moved through the list or removed.
0:26
So let's fix this issue while
introducing a new feature.
0:29
Let's add the buttons entirely
with Javascript to begin with.
0:31
So that our HTML doesn't need to
have those button elements at all.
0:35
First, let's go to index.html and
delete all the buttons.
0:38
Now, let's have a look at app.js, and try
to get a sense of what we need to do here.
0:52
So when a user clicks the button,
to create a new list item,
0:56
this handler at the bottom runs.
1:00
It creates the new list item,
sets the text, and appends it to the dom.
1:03
So somewhere in here,
we need to create three buttons and
1:07
append them to the list item.
1:11
But before we just write that
directly into this handler, remember,
1:13
we don't just need to do this for
new list items.
1:16
We also need to create
those same buttons for
1:19
any list items that are already
present when the page loads.
1:21
So for this reason, it makes sense
to write a separate function
1:25
that can work in both of these cases.
1:28
So up top, let's write a function
that accepts a list item.
1:31
And attaches the needed buttons to it.
1:35
Under the element selections,
let's declare a function.
1:38
I'm going to call it attachListItemButtons
to be clear about what it does.
1:41
And it's going to accept
a list item as a parameter.
1:50
So we'll pass the function li.
1:53
And first in our function,
let's declare the three buttons for
1:57
up, down, and remove.
2:01
So we'll start with let up
= document.createElement.
2:03
And we'll pass the string button.
2:12
I'll go ahead and copy this variable.
2:16
Paste the new one right below and change
it to let down create element button.
2:17
And I'll paste the new one below that and
we'll call this one remove.
2:25
Next, let's add the appropriate classes
and text content to each button.
2:31
So first, say up.className = 'up'.
2:36
And then, we'll say,
up.textcontent = 'Up'.
2:45
I'll go ahead and copy these two
properties and paste them in for down.
2:51
And I'll just change these
two down className.down.
2:58
And down.textContent = 'down'.
3:03
And I'll do the same for remove
3:13
And finally, let's append each
button to the list item element.
3:27
So for up, we'll say li.appendChild(up).
3:31
And for down, I'll say,
li.appendChild(down).
3:44
And then, li.appendChild(remove).
3:48
And now, down in our add item handler,
3:58
we can call our new function
on the new list items.
4:01
So in the handler, we'll say,
attachListItemButtons and
4:08
pass in a (li).
4:14
All right, so let's save our file, and go
over to the browser, and see if it works.
4:17
I'll refresh and
all the buttons are gone now.
4:21
But when we add a new item,
we see that the three buttons are present.
4:25
And clicking them, we can verify,
they work the way we'd hope, nice.
4:31
So now, let's add the buttons
to the existing list items.
4:38
I'll store the button
in the constant list.
4:42
And select them using
the children property.
4:44
Then, below the new function, we can
loop through the list item elements.
4:51
Calling our attachListItemButtons
function on each one.
4:56
Let's save app.js and
have a look in the browser.
5:21
l'll refresh the page and great.
5:23
It looks like our buttons are added.
5:26
And when we enter a new item,
it also has the three buttons, cool.
5:29
You need to sign up for Treehouse in order to download course files.
Sign up