In this video, we'll take a look at some methods for adding new nodes to the DOM, you may find as I have that inner HTML and insert adjacent HTML seem to be simpler to use. But I want to show you some of the methods that are possible in case you prefer them or in case you encounter them in other people's code. So let's take a look at what those methods are. First, if you want to insert into the HTML document, you need to create an element and use create element to do that, that method is associated with the document node, you pass in as a string, the tag name for what you want to create, it then creates that and places it in memory. So you would want to store that in a variable so that you Then can manipulate it, change it and then eventually add it to the DOM.
So create element is the starting point for this process. There's also a create text node, you pass in a string that represents the text you're creating. Now, if you remember, as we were looking at the DOM, and as we're looking at different nodes within the DOM, text that is part of a tag within an HTML page or outside a tag becomes a text node within the DOM. Well, when you're creating a new element to add to the HTML page, that may require that you place text in it. One way to do that would be to create a text node. As we go through the process, I'll also mentioned that you can do the same thing with inner HTML and to me that seems simpler.
Then once you have the node, you can append it to another node using a pin child. So basically, append child is appending, this node as a child of this node, that's what's happening there. Another way to place it into the DOM is using the insert before method. So you would have a node that you've identified within the DOM, and then you're inserting this node before it. So that's how that would work. Now let's take a quick look at an example.
We're going to use this same example that I used in a previous video of adding one more Li tag to this list. So I'm going to open the console and I'm going to dock it again. Now first, since we want to add a new el AI tag, we need to create the element for that. Now, as you'll see, as I go through this process, there are multiple steps to do this, using these commands I've just introduced, where when we were using innerHTML, or insert adjacent HTML, we could do it usually in a single step. So first, I'm going to declare a variable, new element because I'm going to store this element that I'm creating in it. I'm going to set that equal to document dot create element, I'll use the Create element method.
And I need to pass in the tag for the element I'm creating, and that's the Li tag. Now let's take a look at new element. Right now just has an opening and closing tag and that is all we need. To add some attributes, and then we need to add the text. So we can add the attributes using dot syntax. There's the ID.
Here's the style. Now we need to add the text. Now I mentioned that an easy way to do that would simply be new element dot innerHTML equals and then the text, but I want to also show you the Create text node command. So I'm going to create a variable text node and set that equal to document dot. Create a text node and inside parentheses and inside of quotes because it needs to be a string that we're passing in. I'm going to put the text now that created the text node.
Now that text node is not a part of the new element yet. So if I display a new element, as you can see we have the attribute set, but we don't have any text associated with that. Well, I can add that by doing a pen child. Now if we display a new element, we can see that it has the text in there as well. So we've got our element and we're ready to add it to the DOM. I will use a pen child to do But before I do that, I want to select the parent of all of the Li tags, which is the UL tag.
So I'm going to use query selector to do that. Once again, as I've shown in previous videos, there is a class of bullets. And then inside that div tag there is the UL tag. Now I can simply do ul node loops dot append child and pass in the new element that we've created that is stored in the new element variable. And sure enough, it adds it now as mentioned before, I prefer inner HTML or insert adjacent HTML for modifying and working with and adding things to the DOM. But there are a number of other methods that have been made available for doing this type of thing.
And so create element appendChild, create text node insert before, those are also available to do this type of thing. Alright, let's move on to an exercise now.