Appending Nodes

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