In the previous video, you learned how to create elements with JavaScript.

But the elements won't appear on the page until you add them to the DOM.

Remember earlier when we talked about the DOM being a tree like structure with nodes

and branches.

Well that tree is what we'll use to place our new element or DOMNode.

we'll do that by selecting an existing node, and

then appending or adding our new node as a child.

Appending a node to the DOM's done with the appendChild method.

We can call appendChild on the parent element.

We select and pass in our new childElement as an argument.

Now at this point,

you might be wondering what the difference is between an element and a node.

Well for the most part, you can think of them as being interchangeable.

Nodes belong to the DOM, while elements are plain HTML.

Let's go over to index.html and

see where we want to append the list item we created in last video.

So as you can see here, all the list items are nested inside this ul element.

So the ul is the parent element, and the li's are the children.

So if we select the ul and append a child li to it,

the li will appear as the last item after plums.

So let's switch over to app.js and append the list item.

Now, the first step is to select the parent element.

So the ul.

So right above the li variable, let's create a ul variable and

select it with getElementsByTagName.

Remember, this method returns a collection, which is like an array.

And since there's only one unordered list on the page,

the collection will hold only one item, which we can access at 0.

After we've created the new list item, we can append it to the ul with appendChild.

So I'll say, ul.appendChild(li).

So let's save this and switch over to the browser and refresh.

And in the bottom text field,

I'm going to type say spring salamander and click the button.

And cool, it works.

So we've created a new list item and

appended it to the DOM, but there's one small problem.

Notice the text we put into this input isn't getting cleared.

So if we wanted to enter another list item,

we'd have to manually clear this text first.

So let's auto clear this input when a new list item is added.

Over in our function, we can use the value attribute to set the input's value to

an empty string which will clear the input.

And while we're at it, let's do the same thing up here for

the input that changes the list description.

All right, now we can test these two inputs to see that it works.

I'll refresh the page.

Let's type something in text field, click Add Item, and it works.

Nice.

So coming up in the next video, I'll teach you how to remove an element from the DOM.