Hey, everyone, in the previous lesson, we learn how to select the HTML elements using query.
Now let's see how we can change their content.
So we are going to start with the HTML method, which is equivalent to the inner HTML property.
So let's see how it works to get started.
We're going to work with this paragraph.
So let me go to the inspector.
So this paragraph has an idea of sample text, so let's try to get its inner HTML and also change it.
I'm just going to copy this.
Let's go to Visual Studio Code, so here, let's create a variable called content.
And now I'm just going to use Jay Query to select this element, so this is how we select an element
by the idea and now I can just call the HTML method.
And if I don't pass any argument inside here, it is just going to get the content.
So now let's do a console that log.
With the content.
Let's go back there and see what happens.
Let me go to the console first, I'm going to refresh the page and now we can see that using the HTML
method, we were able to get the content of that element.
All right.
Now let's see how we can use the same method to change the HTML content.
So going back to Visual Studio Code, I'm going to do the same thing.
So select the element and called the HTML method.
But this time I'm going to pass an argument here.
So I'm just going to write new content.
And if I do this and refresh the page, we can see that the content has been changed.
So besides the e-mail method, we also have the text method, but this one is a bit different.
So as you can see here, we copied everything that was inside that paragraph and we had this B element
which is used to turn this text into bold.
So we had the B element around this word.
This is why this is showing in bold like this.
If we don't want to get a HTML tags, we just want plain text.
We can use the text method instead.
So this time this paragraph has an idea of sample text only.
So let's go back there and now let's do something similar here, so I'm just going to copy this.
I'm just going to use text content.
So the element I'm getting this time is called sample text only.
So if I get the e-mail, we know what's going to happen.
Let me just comment all this.
Refresh the page, if we do this, we can see that we just got the same thing, so here we have that
age HTML element, but instead if we use the text method.
Refreshing the page, we can see that now we just got the text, so this method ignores the HTML tags
and as we will see in the next lessons, sometimes it can be very useful to just get the text.
Now, moving on to the next method, this one is called a TTR, or you can also call it the attribute
method.
So as the name suggests, it is used to get the attribute of a small element such as the SIRC of an
image or the age ralfe of a link.
So here we have a link.
Let's inspect this to check what do we have inside.
So here's the idea of this link.
Let's just copy this.
This time I'm not going to go to visuals to record because I just want to show you that with Jake Querrey,
you can also write it directly in the console, just like you do it with plain JavaScript.
So I'm going to use Jake Query to select that element.
So like this, don't forget the hash tag for IDs and now I'm going to use a TTR and this is going to
be similar.
But this time we always need at least one argument and the argument is the name of the attribute.
So this time we just want to get the age graph of that link.
So past just passing one argument, it is just going to get the age graph, but instead if we pass two
arguments.
So the first one is the attributes we want to work with, and the second one is going to be the new
value we want to set to this attribute.
So this time I'm just going to write a story to be as Collen four slash four slash.
I'm just going to use Udemy website so udemy dot com.
And when we do this, let's inspect that link again.
If we click it, we can see that we just changed the age graph of this element.
So now let's use the same method to change the as RC of this image and let's do this when we press the
button.
So here we have a button called Change Image.
That's just copy this and take it to visuals to record.
And the image that we want to change.
Has an idea of image or imagined this is in Portuguese, so image J.S..
We just can't be this.
All right, so before going ahead and getting a new image, let's just prepare the structure for this.
So going to Visual Studio Code.
Let's set a Glik event to that button, so.
That button has an idea of change image.
So if Jay queried the name of the event is Kallick instead of unclick, and we know that this is a method,
so we open and close parentheses, we can use semicolon here.
So inside this method, we are going to pass the function that is going to be executed when this event
is detected.
So function.
Open and close parentheses, open and closed, curly braces, so inside here.
We just write the code we want to be executed, so what do we want to do?
We just want to get that image.
That has this ID.
And we are going to apply the 8R method.
And the first argument is the attributes we want to work with, so this time is the source of that image.
And the second value is going to be the value we want to set.
So let's go to Google Images and search for another JavaScript image.
I'm just going to write JavaScript.
Logo or something like this, so let's get a different one.
So this one is good for our example.
I'm just going to choose Compi image address and now going to Visual Studio Code.
I'm just going to paste this link here.
I'm going to save this.
And refreshing the page when we click the button, we can see that we just changed the image.
So this opens a new door for us in terms of possibilities to interact with the dumb now after we do
this.
Now, this button is useless because this is only going to work in the first time.
So one cool thing that we can do here, let's go back there.
After changing the image, we can just hide that button.
So with Jake, where it's very easy to do this.
We can just select the button and use the hide method from January.
So saving this.
We can just click on the button and then we just changed the source of the image and now the button
is hidden.
Now, before we finish, let's just see two more methods which are pretty empty and remove methods.
So let's say we just want to get rid of this element here.
Let's see the idea of this element.
So it has the idea of empty paragraph.
So using plain JavaScript, we could just set the entire e-mail to an empty string.
We can also do this with Jay Quarrie.
So we would just use the HTML method and just pass an empty string.
If we do this, let's go to the console and just copy this.
So as you can see, we just erase the content of this element, but maybe we want to completely remove
this element or maybe we just want to hide it and then show it later.
So we have a few options with Jake, where we saw the first one is the empty method.
So we don't have to pass an empty string.
We can actually just use this method that's going to be exactly the same thing.
So if we do this, as you can see, we just erase the content of this element.
If you want to completely remove this paragraph, you can use the remove method.
So if you do this, as you can see now, we don't see the black background anymore because now the element
is gone.
And the third option.
We already talked about the Hyde method, so this can be useful if you just want to hide it now, but
then maybe you are going to use it later again so you don't want to erase the content or remove the
elements.
So in this case, you can just use the Hyde method and the opposite of the Hyde method.
We are going to talk more about this later is the show method.
So when we do this, the only thing, Jake, where it does is setting the display of that element to
none.
So any time we want it back, we can just call the show method and now we have this element back again.
So those are the most important and most used methods to interact with each HTML elements.
Of course there are more, but that was all I wanted to say for now.
And in the next video, we are going to talk a little bit more about forms.
So I'll see you in the next video.