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
In the last video, you saw how to create elements, but they won't appear on the page until you add them to the DOM. In this video, you'll select an existing node, then learn to append, or add, a new node as a child.
In the previous video, you learned how
to create elements with JavaScript.
0:00
But the elements won't appear on
the page until you add them to the DOM.
0:03
Remember earlier when we talked about the
DOM being a tree like structure with nodes
0:07
and branches.
0:11
Well that tree is what we'll use to
place our new element or DOMNode.
0:12
we'll do that by selecting
an existing node, and
0:16
then appending or
adding our new node as a child.
0:19
Appending a node to the DOM's
done with the appendChild method.
0:21
We can call appendChild
on the parent element.
0:26
We select and pass in our new
childElement as an argument.
0:28
Now at this point,
0:32
you might be wondering what the difference
is between an element and a node.
0:33
Well for the most part, you can think
of them as being interchangeable.
0:37
Nodes belong to the DOM,
while elements are plain HTML.
0:40
Let's go over to index.html and
0:45
see where we want to append the list
item we created in last video.
0:47
So as you can see here, all the list
items are nested inside this ul element.
0:51
So the ul is the parent element,
and the li's are the children.
0:56
So if we select the ul and
append a child li to it,
1:01
the li will appear as
the last item after plums.
1:05
So let's switch over to app.js and
append the list item.
1:10
Now, the first step is to
select the parent element.
1:13
So the ul.
1:17
So right above the li variable,
let's create a ul variable and
1:18
select it with getElementsByTagName.
1:24
Remember, this method returns
a collection, which is like an array.
1:38
And since there's only one
unordered list on the page,
1:43
the collection will hold only one item,
which we can access at 0.
1:47
After we've created the new list item, we
can append it to the ul with appendChild.
1:51
So I'll say, ul.appendChild(li).
1:59
So let's save this and
switch over to the browser and refresh.
2:06
And in the bottom text field,
2:12
I'm going to type say spring
salamander and click the button.
2:15
And cool, it works.
2:21
So we've created a new list item and
2:23
appended it to the DOM, but
there's one small problem.
2:25
Notice the text we put into this
input isn't getting cleared.
2:29
So if we wanted to enter
another list item,
2:34
we'd have to manually
clear this text first.
2:36
So let's auto clear this input
when a new list item is added.
2:41
Over in our function, we can use the value
attribute to set the input's value to
2:45
an empty string which
will clear the input.
2:50
And while we're at it,
let's do the same thing up here for
3:02
the input that changes
the list description.
3:05
All right, now we can test these
two inputs to see that it works.
3:15
I'll refresh the page.
3:19
Let's type something in text field,
click Add Item, and it works.
3:20
Nice.
3:25
So coming up in the next video, I'll teach
you how to remove an element from the DOM.
3:29
You need to sign up for Treehouse in order to download course files.
Sign up