So far, we've looked at changing the HTML page by modifying the attributes that are associated with different nodes that we have selected. Well, we can also change more than that we can change the HTML itself if we choose to. Let's take a look at some of the techniques that are available in order to do that. First off, we have an attribute associated with each node named inner HTML. Basically, enter HTML is the contents of that node, not including the tag, so not including the tag that define that element in the HTML page. When that node is grabbed.

Inner HTML then represents what's inside of that tag. Now that can include other tags For example, if the node were the body tag, then it would not include that to outer body tags, but it would include everything else that is inside of the body. So that's inner HTML. Outer HTML, which was standardized with html5 is very similar to innerHTML. The main difference is it includes those outer tags. And then finally, we have insert adjacent HTML.

This math, which is associated with each node allows you to in cert at certain locations inside that node. Now that location is the first parameter you pass in. There are four possible values for that and we'll look at those values in just a second. The second parameter that gets passed in is what you want to insert and both of those are specified as a string. Now this tool was standardized for html5. Now let's take a look at the four possible values for location.

Here I have a div tag, it has an ID attribute set the content and then it has some text in between the opening and closing div tag. Now the four possible values of which which we can use for location in insert adjacent HTML is before begin after begin before and after, and, and this graphic identifies where each of those will insert the string that we've specified. So before begin and after, and are on the outside of the tag one before at one after it after begin and before and are on the inside of the tag. One at the start, of course, one of the end. So these are some techniques for modifying In the HTML Now let's look at how we might use them. So let's pull up our selecting exercise again.

And also the console. And I'll have the console docked at the bottom so we can see what changes occur. First off, I want to just illustrate the difference between outer HTML and inner HTML. So first, I'm going to select the first Li tag. It has an idea b1, therefore using query selector and the hash symbol, I indicate that I want the tag with an ID of b1, and then a dot inner HTML. So I want to display what the inner HTML is for that.

So I press return. You can see that it is the Text portion of the Li tags. So if I jump out here to the HTML page, here's the Li tag right here. So inner HTML is this portion. Now let's try that again. But I'm going to do before because I'm going to the outer HTML and then the inner HTML because I want you to see that it includes the tag which is inside of the Li tag.

So up arrow to bring that back. Let's change this to be four. Let's go ahead and look at the inner HTML first, and then we'll change it to outer HTML. I press return. And as you can see it is the contents but between the opening and closing tag, and it includes the span tag, which is a part of that. Now let's take a look at outer HTML And we can see there that now that Li tag with all of its attributes are included.

So that's the difference between inner HTML and outer HTML. Now, let's use this and also insert adjacent HTML to make some changes to this page. So first, let's select using query selector all, all of the Li tags. So first, I'm going to specify the class. And then inside that class, I want to get the UL tag and then Li tags and we're doing query selector all so it's going to get all of them. Just to see we can display all nodes.

And we have all the Li tags there. Alright. Now let's use inner HTML to make a change to the second Li tag, I'm going to change items to elements. And I'm going to emphasize the term elements. So let's look at how that would be done. So I'll use all notes, the variable that I placed all of those in, and I'm going to select one, because remember, query selector all returns an array of nodes.

Therefore, if I want the second node, that would be a one. Then dot inner HTML equals I'm going to replace everything that's inside of that tag. So that's equal to You can select different. And now here's where I'm making my change. And I'm going to use an emphasis tag to put emphasis on the word elements. Then finish out that statement, and we can press return.

And notice the change has been made up above. It is emphasize the word elements and also the entire text has been changed. So enter HTML has been around for a while and interface smells a great way to make changes to specific nodes. Now insert adjacent HTML gives you a little bit more power because you can specify where you want to insert the text or the HTML that you want to place into To the node to these three Li tags, let's add a piece of information at the end of them. So all nodes do the first one which is referenced with to insert adjacent adjacent. html.

And we're going to use before and before and because we want it to be a part of the tag not outside the tag, and we just want to add it to the end. So we could have used inner HTML and rewritten this whole thing, but using insert adjacent HTML, we're able to place it after the period here. Comma, and here's the text I want to insert. This is simply the method that allows us to select by ID Sure enough, that adds it at the end. Now we can quickly modify this. Oops.

Also modify which node we're referring to. And one more time modify the no worries referring to. And for class, it's get element by class name. All right, we've just changed those three Li tags by adding an additional text to them. Alright, let's look at one more example. In this case, let's add an additional Li tag.

So a sixth item in this list. Unless use inserted JSON, HTML to do that, we will have to use a different location. We're going to put at the bottom so we will use after end for the insert So we're going to use all nodes. And we're going to refer to the last node. Insert adjacent HTML. And now we're going to use after end.

And then here's what we'll insert. Since we're adding a new Li tag, we have to specify all the HTML for that. I'm giving it an ID of the six. Notice I'm using single quotes, because I'm using the quotes inside of double quotes already. And so I can't use double quotes, or it'll cause the string to terminate there. And then we'll get an error.

So I'm using single quotes because I'm using double quotes to specify the string. So ID equals b six. And I'm also going to set the style The reason I'm doing that, because as when I come to this page, I press the down arrow And have some JavaScript that changes the visibility of each of the Li tags so they show up. And that JavaScript simply sets the style visibility property to visible like this. Now that goes inside single quotes as well. Now we can close the Li tag and type the text.

So I'm simply going to put query selector and query query selector all and do all three. And then we close the Li tag. Whoops. And our double quotes parentheses, and then semicolon. Let's go ahead and insert that and see how it works. Now if I scroll down, sure enough, it shows up as one more item within that list.

So there's some examples of using inner HTML and insert adjacent HTML for modifying the text and HTML portions of each node. Now before I leave this video, some people prefer to work just with the text and not deal with HTML at all. And that's possible. There is an attribute associated with no called enter text. And so it refers to just the text not to the HTML, that could be a part of it as well. However, this is not supported by all browsers.

For example, on Firefox, you have to use text content instead of inner text. So if you choose to use this to work just with text, I prefer enter HTML or insert adjacent HTML but if you would like to To try this, you'll need to do something like this in your JavaScript code. Because you don't know what browser people will be using, you should first use an if statement to check if inner text is available on that node using the truthy and falsy what we talked about with if conditionals. If enter text is available, it will result to true. Therefore, you then go ahead and use enter text to set the text to what you want it to be L to use text content to do that, that would mean that it's in a Firefox browser. So that's something you can use if you choose to.

In the next video, we'll discuss one more concept for making changes to an HTML page.