Creating and appending nodes

So far we've been looking at ways of selecting and modifying DOM elements. Next we'll be taking a look a creating DOM elements that have never existed before. Creating new nodes is super simple. The create element method lets you add an element to the current document. Once you create the element though, it exists in memory, but it's not apart of the current DOM. The append child method is used to add the element as a child of an existing node. So let's take a look at this on a page. On this homepage, I've taken one of the authors out of my list. So let's go ahead and add here back in. First I'm going to turn on the developer tools, by hitting Cmd+Option+I, Ctrl+Option+I, on a PC, and then hitting Esc. And let's go ahead and move this up a little bit so we can see them all. And what I want to do is click on the magnifying glass and find the author right next to the missing author, right here. And if you look at the elements panel you could see that the, author that's missing. Has a list item, but there's no image tag inside the list item, like the other authors. So first we need to create an image element using the Create Element method. Let's go ahead and make a variable here. We'll call it MyElement. And I'm going to set it to the document and call the Create Element method and pass it along the element that I want to create. So what I need here is an image tag, I hit Return. You can see that my element now has an empty image tag. So, obviously this element is going to require some attributes. We can insert those with the set attribute method or by simply using dot notation. So let's try that. We'll do my element. Obviously I'm going to need a location of the image file and that's going to be in the images folder under artists. And then the name of the person LaVonne LaRue, and now and then jpeg, plus we need to add an Alt tag. So this time I'll do myElement.alt and that's going to be syntax which just says photo of LaVanne LaRue. Okay, so, let's take a look at my element now. So, it has the image tag plus the source and alt attribute. This particular artist has non standard HTML attribute of data role speaker. So, we're going to use the set attribute method for this one since I can't use dot notation to access a non standard attribute. So, now I'm going to use set attribute, and I'll pass along data, task, and speaker. So, now if we take a look at my element and see that it has all the attributes that it needs. So you might be wondering why we're not seeing anything on the screen. And that's because a new DOM element can exist in memory but it's not really a part of the DOM until we put it in an existing location. So I need to insert this element inside the list item tag that doesn't have an image. So since we're going to need to find that I'm going to create a variable called myNode and look for that element. I'll go to document and use querySelectorAll and what I want to look for is the artist list. The unordered list with a list item. So, I'm using the querySelectorAll and that's going to find all of the list items within the artist lists. If you look at your breadcrumbs, you can see that the artist list class Is right above our list items and it has the entire list so let's go ahead and hit enter here. And if we take a look at my node now so let's do a directory my node and we'll open this up. You can see that the one that we need, should be this list item, number 6. So if I kind of, select it, you can see it right here, in the DOM. So I need the list item with an index of 6. So what I'm going to do is, access myNode and, specifically the sixth element, and then type in append child. And the name of the element we add which is that list that we created earlier. One I do that, it's going to add the image right where it needs to be right here. So, creating notes is really not a big deal but adding them to the dom means understanding a lot of what we've learned so far in previous movies. Of course sometimes it's easier to use inner HTML. Just add some HTML, so, in most applications, your going to need to decide what option you want to to use.