2.2 Creating Elements

In the previous lesson, you learn how to find and select elements in the document. And that is, of course, very important because you have to be able to find and select elements before you can manipulate them. Well, in this lesson, we are going to dynamically create elements and add them to the document. So let's first of all start with our selecting file. I'm just gonna copy and paste and then rename that copy to Creating. And this is 2.2, and I'm gonna change the title to Creating Elements. All right, so let's clean this up a little bit just so that we can focus on what we want to focus on. Let's remove this second ul element. Let's also get rid of the body variable. Let's get rid of the list variables and this call to console.log. And we will recreate this ul element, so let's complement this out. Let's, of course, look at this in the browser and we need to navigate to creating, but here we go. Of course, we don't see anything in the browser because we commented that out. But if you look inside of div, we are going to see that there is a comment. Comments are objects as well, remember I'll say that just about everything in the document is a comment, same is true, there. So now, we just want to create an element, a ul element, specifically. And, that is very easy to do. I'm just, going to create a variable called ul, you can call it whatever you want. But, if I had an ID that I was going to use for this element I would probably give this variable name the ID name. But I don't, so I'm gonna call it ul. We use our document object and then a method called createElement. We pass in the tag name the element that we want to create, ul, in this case, and there go, we have just created an element. Now by reading this document.createElement, it makes you think that this creates an element and automatically adds it to the document. That is not the case, if we go and look in the browser, we are not going to find a ul element anywhere. And it makes sense, because whenever you create an element, you want to be able to place that element wherever you want inside of the document. It could be in the body, it could be inside of our div element with an id of container, which I'm just going to call the container element because that's easier. Or if we wanted to place it in a completely different spots as far as the structure is concerned, then we could do that. It really wouldn't be very useful if it automatically added the ul element to the document. So whenever you create an element, it is in memory and it stays there until you remove it from memory by setting it to null. So we have this element object and we want to add it to our document. And we want to place this inside of our container so we're going to say container., and every element object has a method called appendChild. And we're going to append that ul element as a child to container. So now, if we take a look at the HTML, we have our container, then we have the ul element that we just created. Now there's no class attribute, there's no children inside of here because we haven't created those. So whenever you dynamically create HTML, you have to give it everything that you want it to have, it's a very tedious process. And it's also very repetitive, so it's very good for practicing. Now if we wanted to add this to the body, all we would have to say is document.body and then appendChild. And the ul elements would be inside of the body element, you can see it listed right there. So the appendChild method is going to take whatever object. And so the appendChild method is going to take whatever object you pass to it and add it at the end of all of its children. So it's not going to be at the first, it's going to be at the very end. Now we can actually in insert this wherever we want, but we will look at that at a different time. Right now we're just going to append an element and we, of course, wants this to be inside of container. So now we just need a few other things. This ul element needs a class attribute, which we will talk about in the next lesson. But we also need to create these separate li elements and add some text. So let's create an li1, which we will once again call createElement. We will pass and li for the tag name. Let's copy this, and let's change the variable name to li2. So we now have two li elements, and we can add them to our ul by calling appendChild. And we're going to do this in order for li1 and then li2. And, of course, we're doing this in order, because once again, the appendChild adds whatever object we pass to it at the end. So we want to do this in order. And of course, if we look at this in the browser we are going to see our ul element with two li elements. Great, so now we just need to add the text. And we can do this in a couple of different ways. But the quote, unquote correct way is the create what are called text nodes. Now, we have seen a text node. Well, at least I think we did in the previous lesson. Yes, we did because we covered first child and stuff like that. We have seen a text node, but the text note that we saw was just white space. In fact, if we uncommon this out, it was the white space between the opening div tag and the opening li tag. So there really wasn't anything there as far as the text was concerned. In this particular case, we want some actual text. So we want the li element to first of all contain this list. This is the first item of the first list, so let's go ahead and do that. We're going to call appendChild, and then we're going to create a text node. Which is the same process as created an element, except that instead, we call a method called, createTextNode. We pass in the text that we want it to contain, and that's that. Let's copy and paste. Of course, we want to add text to the second li element. And we are going to just replace the text here. And so, now, if we go back, we can see we have that li for the first item, the li for the second item. Now, one thing that you'll notice here is that I did not create variables for these texts nodes, and this is just a personal preference of mine. Whenever you create a text node, there's really not a whole lot of manipulation that you could do. You can, of course, change the text instead of that text node. But you can't change the style or anything like that because that is all done for an element. So for me, I don't create variables for text nodes. I just create the text node and automatically append that to wherever I want it to go. And so we have now recreated that ul elements all except the class attribute, and that is something that we will look at in the next lesson.