1 00:00:04,280 --> 00:00:05,630 Welcome back. 2 00:00:05,660 --> 00:00:10,730 In this particular video, let's see what we are going to achieve. 3 00:00:10,880 --> 00:00:19,970 Until this point, we can add CSS dynamically or we can change any properties of our HTML using JavaScript 4 00:00:19,970 --> 00:00:22,040 with the help of the DOM. 5 00:00:22,250 --> 00:00:29,720 So in this particular video, let's say that we want to remove a content from the page or we want to 6 00:00:29,720 --> 00:00:31,880 add content from the page. 7 00:00:31,910 --> 00:00:34,610 So for example, let's work on this. 8 00:00:34,610 --> 00:00:39,200 What is coding or this network error or list of programming languages. 9 00:00:39,210 --> 00:00:40,670 So let's stick to this. 10 00:00:40,670 --> 00:00:41,960 What is coding? 11 00:00:42,200 --> 00:00:44,630 Let's say that we want to remove this text. 12 00:00:44,630 --> 00:00:46,470 How are we going to do it? 13 00:00:46,490 --> 00:00:50,330 So let me show you how back to our project. 14 00:00:50,360 --> 00:00:59,570 Now we are on step number three or concept number three, which is did we see is that manipulating element 15 00:00:59,570 --> 00:01:00,320 content? 16 00:01:00,320 --> 00:01:06,340 And we can use these two methods in HTML or text content. 17 00:01:06,350 --> 00:01:08,380 So how are you going to do it? 18 00:01:08,390 --> 00:01:15,880 So as always, let's copy this one, bring it down here, because this is what we are working on. 19 00:01:15,890 --> 00:01:18,440 Let's give it beautiful command as that. 20 00:01:18,440 --> 00:01:21,980 And down here to give it a beautiful comment and start. 21 00:01:22,070 --> 00:01:29,040 So the first step is we need to target the particular elements that we want to remove the content. 22 00:01:29,060 --> 00:01:33,220 So scroll down here on line number 22 on my code. 23 00:01:33,230 --> 00:01:40,550 We want to give it a class name or ID so that we can target it, select it, and then remove the content 24 00:01:40,550 --> 00:01:41,420 from the page. 25 00:01:41,600 --> 00:01:47,390 So let's give it, let's say a class of, say, coding. 26 00:01:49,140 --> 00:01:49,920 As that. 27 00:01:49,940 --> 00:01:51,410 So here we go. 28 00:01:51,860 --> 00:01:52,110 Good. 29 00:01:52,130 --> 00:01:54,350 So coming back to this file here. 30 00:01:54,380 --> 00:01:57,350 Let's go ahead and remove this. 31 00:01:57,470 --> 00:02:02,570 So before we get into that, let's explain what is going on here, these methods? 32 00:02:02,630 --> 00:02:08,539 Well, the inner HTML method is used to get content on the page. 33 00:02:08,930 --> 00:02:11,210 And the same thing applies to the test. 34 00:02:11,210 --> 00:02:15,620 Content is also used to get content of the particular element. 35 00:02:15,650 --> 00:02:19,340 So let's go ahead and select the element. 36 00:02:19,340 --> 00:02:25,370 And let me show you what I mean by inner HTML and text content. 37 00:02:25,550 --> 00:02:33,260 So for this one, first step is select the elements and here we go. 38 00:02:33,290 --> 00:02:41,180 So the cons, I would say coding elements is equal to document the query selector. 39 00:02:41,210 --> 00:02:48,350 And because it's a class I use period in the name of my class, which is coding, again, this is what 40 00:02:48,350 --> 00:02:51,980 I'm referring to, this class of coding this one. 41 00:02:52,250 --> 00:02:54,710 So back to my file again. 42 00:02:54,710 --> 00:02:59,840 Always make sure you check if the element has been selected in that way. 43 00:02:59,900 --> 00:03:03,030 Going to help you avoid some bugs as you see on. 44 00:03:03,050 --> 00:03:06,110 And indeed it has selected that. 45 00:03:06,320 --> 00:03:11,990 So what I need to do is that let's talk about the inner HTML and then text content. 46 00:03:12,470 --> 00:03:19,650 In this selected element, we have these two methods on them that is inner HTML and test content. 47 00:03:19,700 --> 00:03:27,440 So if we want to get the actual content for this particular element here, which is this, I want this 48 00:03:27,440 --> 00:03:30,590 one all the content only, but not the tag. 49 00:03:30,620 --> 00:03:35,090 That's why we need this method called dot inner HTML. 50 00:03:35,540 --> 00:03:38,150 And then it's a property if I save it. 51 00:03:38,210 --> 00:03:41,630 See that I get that is a kind of property or a method. 52 00:03:41,630 --> 00:03:44,030 Let me see whether it's a matter of property. 53 00:03:44,030 --> 00:03:48,280 But I think is a property because we are not calling as a function like this. 54 00:03:48,290 --> 00:03:51,370 So it is what is a property I start. 55 00:03:51,380 --> 00:03:54,620 So bear in mind about that. 56 00:03:54,890 --> 00:04:01,390 Okay, so the same thing, I can use the test contents also and I get the same thing. 57 00:04:01,400 --> 00:04:07,910 So what is a difference is between inner HTML and text content. 58 00:04:08,210 --> 00:04:11,600 Let me give you the differences and I will demonstrate for you to see. 59 00:04:11,600 --> 00:04:20,839 Well, the differences between the inner HTML and test content is that in HTML returns the HTML contents 60 00:04:20,839 --> 00:04:27,860 of the element and the test content also retains the test contents of the element. 61 00:04:27,890 --> 00:04:34,580 So before showing you the differences between the inner HTML and test content, let's go ahead and work 62 00:04:34,580 --> 00:04:35,870 with the logic first. 63 00:04:35,870 --> 00:04:37,490 So here we go. 64 00:04:37,520 --> 00:04:41,030 So let's come here and now it's time to remove it. 65 00:04:41,030 --> 00:04:43,940 So I will take my coding element. 66 00:04:43,950 --> 00:04:48,980 DOT inner HTML now is equal to empty string. 67 00:04:49,460 --> 00:04:54,080 So if I save it now and check it out, let me reduce this one. 68 00:04:54,100 --> 00:04:59,450 We say that there is no wireless code in here because I have remove it. 69 00:04:59,690 --> 00:05:03,860 If I comment this one, I can see that is back. 70 00:05:03,860 --> 00:05:05,650 What is coding is back. 71 00:05:05,660 --> 00:05:12,750 But again, let's check the console and see if it is indeed it has removed from the dome. 72 00:05:12,770 --> 00:05:18,050 So let's check go to Element and now we see that we have what is code in here, this one. 73 00:05:18,050 --> 00:05:23,400 So let's say that now you want to remove it, so save it now and check it out. 74 00:05:23,420 --> 00:05:33,230 Well, if I save it, it will say that we still have the HTML tag here, but there is no content, so 75 00:05:33,230 --> 00:05:40,700 it simply means that it does not remove the entire element from the DOM, but instead it removes the 76 00:05:40,700 --> 00:05:42,050 content only. 77 00:05:42,560 --> 00:05:46,400 What about if I use, let's say, test content also? 78 00:05:47,030 --> 00:05:48,620 Well, the same thing. 79 00:05:49,390 --> 00:05:55,540 It couldn't remove the entire elements, but instead it has removed the content inside. 80 00:05:55,600 --> 00:05:59,900 So this is one key note you need to bear in mind about that. 81 00:05:59,920 --> 00:06:07,990 So coming back to the inner HTML and test content, the differences, well, let's go ahead and then 82 00:06:07,990 --> 00:06:13,960 add content to add content to the page. 83 00:06:13,990 --> 00:06:16,720 And let me show you what I mean here about the differences. 84 00:06:16,750 --> 00:06:24,650 So let's say we have each one here and let's give it a class of, say, tag line as women. 85 00:06:24,700 --> 00:06:31,000 So if you see that this particular element, it has no content, so you want to add content inside this 86 00:06:31,000 --> 00:06:31,440 one. 87 00:06:31,450 --> 00:06:35,170 So I'll go ahead and select my tag line. 88 00:06:35,350 --> 00:06:37,780 I think it's double G or one G. 89 00:06:38,260 --> 00:06:42,700 I forgot a key tag I think is one G Good. 90 00:06:42,700 --> 00:06:52,600 So now I always select this one, come down here and then I want to select the tag line element, tag 91 00:06:53,800 --> 00:06:55,780 line, element. 92 00:06:55,780 --> 00:06:58,900 And here is going to be as my tag line. 93 00:06:59,140 --> 00:06:59,400 Good. 94 00:06:59,410 --> 00:07:08,130 So now I have selected if I check my tag line elements here inside my console, check the console. 95 00:07:08,140 --> 00:07:13,540 Indeed, this is my tag line and can see that there is no content inside that. 96 00:07:13,810 --> 00:07:21,220 So for this one and if I check you see that the tag line is nowhere to be found because it is an empty 97 00:07:21,220 --> 00:07:23,260 string or empty container. 98 00:07:23,260 --> 00:07:24,400 So here we go. 99 00:07:25,370 --> 00:07:29,060 After selecting I will use tag line dot. 100 00:07:29,100 --> 00:07:35,060 In HTML then I can see that this is my tag. 101 00:07:35,420 --> 00:07:39,470 This is my tag line if I save it. 102 00:07:39,500 --> 00:07:41,400 Now you see, I have. 103 00:07:41,420 --> 00:07:44,570 This is my tag line. 104 00:07:44,600 --> 00:07:45,650 That is it. 105 00:07:45,680 --> 00:07:47,200 That is it, guys. 106 00:07:47,210 --> 00:07:51,890 So we can achieve the same concept using the. 107 00:07:52,720 --> 00:07:55,920 E now h html dot test contents. 108 00:07:55,940 --> 00:07:58,530 I would say this is my tag line too. 109 00:07:59,660 --> 00:08:05,820 So if I comment this one out here and let's see, we have the same result. 110 00:08:05,840 --> 00:08:11,720 So what is the differences between the inner HTML and text content? 111 00:08:11,840 --> 00:08:16,460 Let's start with the inner HTML for inner HTML. 112 00:08:16,490 --> 00:08:23,630 We can inject any HTML syntax with a combination of CSS into the DOM. 113 00:08:24,110 --> 00:08:24,950 Check it out. 114 00:08:25,190 --> 00:08:26,780 Let's get back to the code. 115 00:08:26,780 --> 00:08:29,990 And now instead of each one, let's say this is Dev. 116 00:08:30,890 --> 00:08:33,740 We see that we're going to have maybe a small test in it. 117 00:08:33,770 --> 00:08:36,110 Yes, this is my tag line. 118 00:08:36,500 --> 00:08:43,250 But let's say that we want to add a test of edge to inside my div, right? 119 00:08:43,250 --> 00:08:48,440 So with the inner HTML, like I said, we can write it in a combination with HTML. 120 00:08:48,680 --> 00:08:51,760 So with this one here, I'll cut this one from here. 121 00:08:51,770 --> 00:08:53,690 Let me comment this one out here. 122 00:08:53,720 --> 00:08:56,900 Now for this I can use h one. 123 00:08:57,950 --> 00:09:00,860 And then opening and closing tag. 124 00:09:01,070 --> 00:09:06,020 Then my h one here and here I can inject my content. 125 00:09:06,050 --> 00:09:06,780 Check it out. 126 00:09:06,860 --> 00:09:07,760 You can say that. 127 00:09:07,760 --> 00:09:10,970 Indeed, this is my HTML. 128 00:09:11,210 --> 00:09:14,000 If I check the console. 129 00:09:14,270 --> 00:09:17,120 So let's go to element. 130 00:09:17,330 --> 00:09:19,370 And let's see the tag line. 131 00:09:19,400 --> 00:09:20,080 Open it. 132 00:09:20,090 --> 00:09:23,080 And we see that inside my div. 133 00:09:23,090 --> 00:09:26,480 We have an element with h one. 134 00:09:26,670 --> 00:09:28,910 So this is my tag line. 135 00:09:28,940 --> 00:09:30,680 That's the beauty of it. 136 00:09:31,600 --> 00:09:32,110 All right. 137 00:09:32,110 --> 00:09:34,480 So let's talk about the test content. 138 00:09:34,510 --> 00:09:36,100 So the same thing here. 139 00:09:36,130 --> 00:09:40,120 If I change this one to test contents, check it out. 140 00:09:40,210 --> 00:09:42,760 Now, let's check what we have. 141 00:09:42,790 --> 00:09:47,700 It will say that it has displayed exactly as it was. 142 00:09:47,710 --> 00:09:49,450 You see that it has intake. 143 00:09:49,450 --> 00:09:52,020 The HTML takes into consideration. 144 00:09:52,030 --> 00:09:54,520 It always appears as a text. 145 00:09:54,610 --> 00:10:02,200 So if we want to use an element, we test with some HTML contained or a HTML tag, then the inner HTML 146 00:10:02,230 --> 00:10:04,000 is the best way to go. 147 00:10:04,180 --> 00:10:11,350 So that is it about the DOM manipulation, how we can add content and select element and awesome style. 148 00:10:11,380 --> 00:10:16,460 Now it's time to add more interactivity to our application. 149 00:10:16,480 --> 00:10:18,700 That is what you call an event. 150 00:10:18,730 --> 00:10:21,730 So let's say that now I want to take an action. 151 00:10:21,730 --> 00:10:25,380 For example, I want to click on a button before adding a class. 152 00:10:25,390 --> 00:10:30,070 Or if I move my mouse around the page, I want something to happen. 153 00:10:30,070 --> 00:10:34,000 And that is what we are going to talk about the next video.