So then once we've done the first step, which is querying the Dom for some kind of element that we
want to change, the next step is to actually do something with it.
And in this video I'm going to show you how we can change the text inside elements and also the HTML
inside elements.
So first of all, let's have a little look at the index page.
We can see we still have this content right here.
And I've also added this div with a class of content over here.
Now the first thing I'd like to do is just use a query selector to get the first paragraph over here,
and then I'm going to change the text inside this paragraph.
So first of all, we need to say const and we'll call this power up.
We're going to store our reference to this paragraph tag inside this constant, and we'll set that equal
to document dot query selector.
And inside here we just want to pass in P that is the CSS selector to get the first paragraph on the
page.
So once we have that, how do we actually get the inner text over here inside the p tag?
Well, I just said the property directly.
It's called inner text.
So if we come underneath here I can say console dot log and we want the power dot inner text like that.
This is not a method, it's a property.
Hence we don't use parentheses like this.
We only do that with methods.
This is a property name and what this does is get us the inner text of that element.
So if we save it and preview, we can see that text right here.
Now what if we want to update that text?
Well, all we need to do is grab that text and set it equal to something else.
So we could say power dot inner text is now equal to ninjas are awesome.
And then if we save that, what it's going to do is grab this paragraph, get the inner text property,
and it's going to set it equal to something else.
So if we preview over here now, we can see it's changed on the page and that is pretty awesome.
That was very simple to do.
We just reach and grab a reference to the paragraph, then use the inner text property to set it to
a new text.
Now notice when we do this, it overrides the old text completely.
Now if you just wanted to append to the text, you could use plus equals.
So I'm going to save that and we can come over here.
We still get Hello world, but it adds on the extra content as well.
All right.
In my case I just want to overwrite it for now.
So now we've seen how to change the inner text of something.
What if I want to change the text of several items at once?
Well, let me just comment this dude out, first of all, and I'm going to come underneath this time.
We're going to grab all of the different tags.
So we'll say const Paris, that's plural equals documents, dot query selector all and we want all of
the P tags.
So we get a reference to all of those as a node list.
I remember when we have a node list we can use for each on them to cycle through it.
So we could say Paris Dot for each and then we pass through a callback function in here.
That callback function as a parameter will take the individual item.
As we cycle through the node list, we're going to call this power, but you can call it what you want.
And inside this callback function, what I'm going to do is for now, just console dot, log the power
inner text.
Now this is going to cycle through this node list of all these different P tags and for each one it's
going to fire this function and take each individual paragraph.
Then we're logging out the inner text of that paragraph each time around.
So we should see all of these in the console.
All right, so we have these different P tags and we get all of this content inside these P tags.
Now what I'm going to do is update the context of each one of those.
I'm going to say p dot inner text and set that equal or we'll say plus equal and we'll add on new text.
So we're taking all of the paragraphs and we're adding this extra text inside them.
We're not overwriting it completely, we're just adding on the extra text at the end of each one.
So save it and we can see an error.
And that is because we've called it P and not para.
Okay, so let's save that.
And now we can see new text, new text, new text and new text.
Awesome.
So that's how we cycle through several different elements and add text or change the text to each one
of those elements using for each.
Okay, then.
So that's how we change the text of something using this property in a text.
But what if we want to change the HTML of something?
So for example, we have this div at the bottom with a class of content and it has a P tag inside it.
What if I want to grab this element right here?
Then I want to change the HTML inside it.
Well, we can do that just as easily.
So the first step is to get a reference to this.
So I'll say const, we're going to call this content and set it equal to.
Document query selector.
And inside we're going to use the contents class.
And now we have that content variable.
We can say console dot log and I'm going to say contents dot inner HTML like so.
So HTML is all caps.
So not in a text anymore in a HTML.
So if we save this now we can see the HTML content inside this content div, which is just that paragraph
tag.
So that's how we get it.
What if we want to update it?
Well, let me just comment this out and come underneath.
I'm going to say contents dot inner HTML is now equal to an H2 tag.
And we'll say this is a new H2 and oops, we've done all this in capitals, so let's make the H2 down
here, not capital.
It doesn't matter that this is capitals, that's fine and we're going to save this.
What it's going to do is take this HTML and replace it with this HTML right here.
So if we save it, we can now see this is a new H2 and we can see that element right there inside the
content div.
So like before when we worked with inner text, this completely overwrites the content.
So if I want to just append the content, then I would use plus equals instead.
So I'd save that refresh and now we can still see this is the content, but now we get an H2 as well.
And if we open this content div up we can see both of those are now in there.
So plus equals to append or just equals to overwrite it.
Okay.
So I'm going to use plus equals.
In fact, I'm going to just comment this out.
We don't need that anymore.
Okay.
So I'm going to go through one more example now.
I'm going to imagine we've gone out to a database and got a list or an array of people.
And what we want to do is output a little HTML template for each of those people in the array.
So what I'm going to do is first of all, say const people is equal to an array.
And inside here we'll just do a few people.
Mario first of all, then Luigi and then Yoshi.
All right, so we have this array of people.
Just imagine we got this from a database or something.
Now we want to cycle through these people and we want to generate a little HTML template or snippet
for each person and output that person in the HTML.
So the first step is to get the people and say for each and then what we're going to do is take the
person and inside a callback function we're going to create an HTML template.
Now all we're going to do is grab the content, which is this thing over here, and we're going to append
to it each time a little template so we're not overwriting the content for each person.
We're just adding an extra little bit of content.
So this is going to be a template string because I want to embed this variable inside it.
And what we'll do is create a P tag and inside that will output the person.
So we need our dollar sign, curly braces, then the person, then we're going to close off the P tag.
So we're cycling through the people for each person.
We're firing this callback function and we're taking the content over here, which is this div currently
has a P tag in it.
We're taking that content reference and we're appending to the HTML.
We're not overwriting it, we're just adding a little bit extra for each person.
And that little bit extra is a P tag with the person embedded inside it.
So if we save this now, come over here and go to the console.
We can see an error.
We've got an assignment to a constant variable.
So that's because we're trying to change the content directly.
We need to say dot inner HTML, of course, and then we're appending to that, save it.
And now we can see these things right here.
So if we inspect that inside the content now we can see all of these different P tags.
So that's a good example of when we might use this kind of thing.
If we have data we want to spit out into the browser, but we want to do it in some kind of template
way.
We can cycle through that data and we can output an HTML template for each bit of data in that array.
So all of this text and HTML changing is going to be hugely useful later in the course when we come
to work on our different projects and we need to update the HTML or the text in the browser.
