1 00:00:09,210 --> 00:00:15,260 Hey, everyone, in the previous lesson, we learn how to select the HTML elements using query. 2 00:00:15,630 --> 00:00:18,450 Now let's see how we can change their content. 3 00:00:18,660 --> 00:00:25,770 So we are going to start with the HTML method, which is equivalent to the inner HTML property. 4 00:00:25,960 --> 00:00:29,080 So let's see how it works to get started. 5 00:00:29,100 --> 00:00:31,620 We're going to work with this paragraph. 6 00:00:31,800 --> 00:00:33,680 So let me go to the inspector. 7 00:00:33,870 --> 00:00:44,180 So this paragraph has an idea of sample text, so let's try to get its inner HTML and also change it. 8 00:00:44,370 --> 00:00:46,050 I'm just going to copy this. 9 00:00:47,040 --> 00:00:52,230 Let's go to Visual Studio Code, so here, let's create a variable called content. 10 00:00:53,280 --> 00:01:00,750 And now I'm just going to use Jay Query to select this element, so this is how we select an element 11 00:01:00,750 --> 00:01:05,490 by the idea and now I can just call the HTML method. 12 00:01:05,760 --> 00:01:12,120 And if I don't pass any argument inside here, it is just going to get the content. 13 00:01:12,390 --> 00:01:14,910 So now let's do a console that log. 14 00:01:18,590 --> 00:01:20,150 With the content. 15 00:01:21,680 --> 00:01:24,140 Let's go back there and see what happens. 16 00:01:24,170 --> 00:01:31,730 Let me go to the console first, I'm going to refresh the page and now we can see that using the HTML 17 00:01:32,210 --> 00:01:36,860 method, we were able to get the content of that element. 18 00:01:37,160 --> 00:01:37,610 All right. 19 00:01:37,610 --> 00:01:42,610 Now let's see how we can use the same method to change the HTML content. 20 00:01:42,650 --> 00:01:46,450 So going back to Visual Studio Code, I'm going to do the same thing. 21 00:01:46,460 --> 00:01:50,140 So select the element and called the HTML method. 22 00:01:50,360 --> 00:01:53,420 But this time I'm going to pass an argument here. 23 00:01:53,570 --> 00:01:56,450 So I'm just going to write new content. 24 00:01:56,930 --> 00:02:03,130 And if I do this and refresh the page, we can see that the content has been changed. 25 00:02:04,010 --> 00:02:12,000 So besides the e-mail method, we also have the text method, but this one is a bit different. 26 00:02:12,230 --> 00:02:20,870 So as you can see here, we copied everything that was inside that paragraph and we had this B element 27 00:02:20,990 --> 00:02:24,340 which is used to turn this text into bold. 28 00:02:24,350 --> 00:02:27,520 So we had the B element around this word. 29 00:02:27,560 --> 00:02:30,410 This is why this is showing in bold like this. 30 00:02:30,530 --> 00:02:35,960 If we don't want to get a HTML tags, we just want plain text. 31 00:02:35,990 --> 00:02:39,090 We can use the text method instead. 32 00:02:39,320 --> 00:02:45,500 So this time this paragraph has an idea of sample text only. 33 00:02:47,140 --> 00:02:54,010 So let's go back there and now let's do something similar here, so I'm just going to copy this. 34 00:03:00,360 --> 00:03:03,420 I'm just going to use text content. 35 00:03:06,740 --> 00:03:13,140 So the element I'm getting this time is called sample text only. 36 00:03:13,310 --> 00:03:16,780 So if I get the e-mail, we know what's going to happen. 37 00:03:16,790 --> 00:03:19,340 Let me just comment all this. 38 00:03:21,430 --> 00:03:29,020 Refresh the page, if we do this, we can see that we just got the same thing, so here we have that 39 00:03:29,770 --> 00:03:34,930 age HTML element, but instead if we use the text method. 40 00:03:37,470 --> 00:03:45,780 Refreshing the page, we can see that now we just got the text, so this method ignores the HTML tags 41 00:03:45,780 --> 00:03:53,320 and as we will see in the next lessons, sometimes it can be very useful to just get the text. 42 00:03:53,520 --> 00:04:00,870 Now, moving on to the next method, this one is called a TTR, or you can also call it the attribute 43 00:04:00,870 --> 00:04:01,450 method. 44 00:04:01,770 --> 00:04:11,310 So as the name suggests, it is used to get the attribute of a small element such as the SIRC of an 45 00:04:11,310 --> 00:04:14,040 image or the age ralfe of a link. 46 00:04:14,250 --> 00:04:16,290 So here we have a link. 47 00:04:16,590 --> 00:04:20,290 Let's inspect this to check what do we have inside. 48 00:04:20,310 --> 00:04:23,070 So here's the idea of this link. 49 00:04:23,230 --> 00:04:24,650 Let's just copy this. 50 00:04:25,020 --> 00:04:31,230 This time I'm not going to go to visuals to record because I just want to show you that with Jake Querrey, 51 00:04:31,440 --> 00:04:36,380 you can also write it directly in the console, just like you do it with plain JavaScript. 52 00:04:36,840 --> 00:04:41,490 So I'm going to use Jake Query to select that element. 53 00:04:41,640 --> 00:04:50,040 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 54 00:04:50,040 --> 00:04:50,730 be similar. 55 00:04:50,730 --> 00:04:58,040 But this time we always need at least one argument and the argument is the name of the attribute. 56 00:04:58,350 --> 00:05:03,210 So this time we just want to get the age graph of that link. 57 00:05:03,960 --> 00:05:13,440 So past just passing one argument, it is just going to get the age graph, but instead if we pass two 58 00:05:13,440 --> 00:05:14,310 arguments. 59 00:05:14,340 --> 00:05:21,330 So the first one is the attributes we want to work with, and the second one is going to be the new 60 00:05:21,330 --> 00:05:25,300 value we want to set to this attribute. 61 00:05:25,560 --> 00:05:31,610 So this time I'm just going to write a story to be as Collen four slash four slash. 62 00:05:31,860 --> 00:05:37,340 I'm just going to use Udemy website so udemy dot com. 63 00:05:37,590 --> 00:05:41,040 And when we do this, let's inspect that link again. 64 00:05:41,310 --> 00:05:48,390 If we click it, we can see that we just changed the age graph of this element. 65 00:05:48,600 --> 00:05:56,850 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 66 00:05:56,850 --> 00:05:57,330 button. 67 00:05:57,340 --> 00:06:00,660 So here we have a button called Change Image. 68 00:06:01,020 --> 00:06:04,710 That's just copy this and take it to visuals to record. 69 00:06:07,850 --> 00:06:10,670 And the image that we want to change. 70 00:06:12,020 --> 00:06:19,130 Has an idea of image or imagined this is in Portuguese, so image J.S.. 71 00:06:20,100 --> 00:06:21,420 We just can't be this. 72 00:06:23,190 --> 00:06:29,640 All right, so before going ahead and getting a new image, let's just prepare the structure for this. 73 00:06:29,950 --> 00:06:32,010 So going to Visual Studio Code. 74 00:06:35,900 --> 00:06:40,100 Let's set a Glik event to that button, so. 75 00:06:43,650 --> 00:06:47,550 That button has an idea of change image. 76 00:06:50,820 --> 00:06:59,750 So if Jay queried the name of the event is Kallick instead of unclick, and we know that this is a method, 77 00:06:59,760 --> 00:07:04,070 so we open and close parentheses, we can use semicolon here. 78 00:07:04,350 --> 00:07:12,390 So inside this method, we are going to pass the function that is going to be executed when this event 79 00:07:12,390 --> 00:07:13,240 is detected. 80 00:07:13,260 --> 00:07:14,370 So function. 81 00:07:15,680 --> 00:07:20,990 Open and close parentheses, open and closed, curly braces, so inside here. 82 00:07:22,280 --> 00:07:27,810 We just write the code we want to be executed, so what do we want to do? 83 00:07:27,830 --> 00:07:29,900 We just want to get that image. 84 00:07:31,510 --> 00:07:33,610 That has this ID. 85 00:07:36,700 --> 00:07:41,440 And we are going to apply the 8R method. 86 00:07:42,850 --> 00:07:50,090 And the first argument is the attributes we want to work with, so this time is the source of that image. 87 00:07:50,770 --> 00:07:55,250 And the second value is going to be the value we want to set. 88 00:07:55,570 --> 00:08:00,830 So let's go to Google Images and search for another JavaScript image. 89 00:08:01,120 --> 00:08:04,540 I'm just going to write JavaScript. 90 00:08:05,950 --> 00:08:11,090 Logo or something like this, so let's get a different one. 91 00:08:11,110 --> 00:08:13,780 So this one is good for our example. 92 00:08:14,050 --> 00:08:21,310 I'm just going to choose Compi image address and now going to Visual Studio Code. 93 00:08:21,310 --> 00:08:23,740 I'm just going to paste this link here. 94 00:08:24,920 --> 00:08:26,420 I'm going to save this. 95 00:08:28,110 --> 00:08:36,000 And refreshing the page when we click the button, we can see that we just changed the image. 96 00:08:36,150 --> 00:08:45,180 So this opens a new door for us in terms of possibilities to interact with the dumb now after we do 97 00:08:45,180 --> 00:08:45,660 this. 98 00:08:45,690 --> 00:08:51,530 Now, this button is useless because this is only going to work in the first time. 99 00:08:51,540 --> 00:08:55,470 So one cool thing that we can do here, let's go back there. 100 00:08:55,650 --> 00:08:59,780 After changing the image, we can just hide that button. 101 00:09:00,240 --> 00:09:03,210 So with Jake, where it's very easy to do this. 102 00:09:04,390 --> 00:09:10,750 We can just select the button and use the hide method from January. 103 00:09:11,980 --> 00:09:13,240 So saving this. 104 00:09:14,640 --> 00:09:22,410 We can just click on the button and then we just changed the source of the image and now the button 105 00:09:22,410 --> 00:09:23,320 is hidden. 106 00:09:23,730 --> 00:09:31,250 Now, before we finish, let's just see two more methods which are pretty empty and remove methods. 107 00:09:31,440 --> 00:09:35,500 So let's say we just want to get rid of this element here. 108 00:09:35,610 --> 00:09:37,770 Let's see the idea of this element. 109 00:09:38,310 --> 00:09:41,310 So it has the idea of empty paragraph. 110 00:09:42,250 --> 00:09:49,190 So using plain JavaScript, we could just set the entire e-mail to an empty string. 111 00:09:49,210 --> 00:09:51,390 We can also do this with Jay Quarrie. 112 00:09:51,610 --> 00:09:57,460 So we would just use the HTML method and just pass an empty string. 113 00:09:57,580 --> 00:10:01,450 If we do this, let's go to the console and just copy this. 114 00:10:04,520 --> 00:10:12,680 So as you can see, we just erase the content of this element, but maybe we want to completely remove 115 00:10:12,680 --> 00:10:17,770 this element or maybe we just want to hide it and then show it later. 116 00:10:17,780 --> 00:10:23,620 So we have a few options with Jake, where we saw the first one is the empty method. 117 00:10:23,870 --> 00:10:26,770 So we don't have to pass an empty string. 118 00:10:26,990 --> 00:10:32,870 We can actually just use this method that's going to be exactly the same thing. 119 00:10:33,020 --> 00:10:39,710 So if we do this, as you can see, we just erase the content of this element. 120 00:10:40,040 --> 00:10:46,030 If you want to completely remove this paragraph, you can use the remove method. 121 00:10:46,250 --> 00:10:55,610 So if you do this, as you can see now, we don't see the black background anymore because now the element 122 00:10:55,610 --> 00:10:56,390 is gone. 123 00:10:56,630 --> 00:10:58,130 And the third option. 124 00:10:59,160 --> 00:11:05,160 We already talked about the Hyde method, so this can be useful if you just want to hide it now, but 125 00:11:05,160 --> 00:11:12,510 then maybe you are going to use it later again so you don't want to erase the content or remove the 126 00:11:12,510 --> 00:11:13,090 elements. 127 00:11:13,090 --> 00:11:21,320 So in this case, you can just use the Hyde method and the opposite of the Hyde method. 128 00:11:21,630 --> 00:11:26,000 We are going to talk more about this later is the show method. 129 00:11:26,310 --> 00:11:32,670 So when we do this, the only thing, Jake, where it does is setting the display of that element to 130 00:11:32,670 --> 00:11:33,160 none. 131 00:11:33,330 --> 00:11:41,660 So any time we want it back, we can just call the show method and now we have this element back again. 132 00:11:42,210 --> 00:11:50,010 So those are the most important and most used methods to interact with each HTML elements. 133 00:11:50,010 --> 00:11:54,150 Of course there are more, but that was all I wanted to say for now. 134 00:11:54,150 --> 00:11:59,070 And in the next video, we are going to talk a little bit more about forms. 135 00:11:59,220 --> 00:12:00,960 So I'll see you in the next video.