1 00:00:00,000 --> 00:00:05,060 Let's take a look at how we can dynamically add HTML to a page. 2 00:00:05,055 --> 00:00:07,295 And so for this, we need an example. 3 00:00:07,290 --> 00:00:12,980 Let's give our page a div with a customer ID of custom ID. 4 00:00:12,975 --> 00:00:14,645 And there's not going to be anything in here, 5 00:00:14,640 --> 00:00:16,490 so it's going to be completely empty. 6 00:00:16,485 --> 00:00:18,935 And we know that if we go back to our browser and 7 00:00:18,930 --> 00:00:21,060 we refresh your page, there's going to be nothing in there. 8 00:00:21,060 --> 00:00:22,470 And if we look at our source code, 9 00:00:22,470 --> 00:00:24,540 it just says custom ID. There's nothing in there. 10 00:00:24,540 --> 00:00:28,550 Let's go ahead and add some custom HTML in there. 11 00:00:28,545 --> 00:00:30,155 So in the last couple of lessons, 12 00:00:30,150 --> 00:00:35,020 you saw that we would select this ID with custom ID. 13 00:00:35,015 --> 00:00:37,495 And I'm using the id selector here, 14 00:00:37,490 --> 00:00:41,240 dot txt, text in here. 15 00:00:41,240 --> 00:00:43,370 And so we were using taxed and that's, 16 00:00:43,370 --> 00:00:45,070 that's all, well and good. 17 00:00:45,065 --> 00:00:46,945 But that's not actually going to add any HTML. 18 00:00:46,940 --> 00:00:52,840 So if we wanted to add an H1 and here we can say H1, HelloWorld. 19 00:00:52,835 --> 00:00:57,565 And unfortunately this is not going to do what we expect it to do. 20 00:00:57,560 --> 00:00:59,330 And let's go back to our code here. 21 00:00:59,330 --> 00:01:01,190 It's actually going to print out H1, 22 00:01:01,190 --> 00:01:03,100 HelloWorld eight slash H1. 23 00:01:03,095 --> 00:01:04,585 That's maybe not what we want. 24 00:01:04,580 --> 00:01:06,910 Maybe we want to actually add some, 25 00:01:06,905 --> 00:01:08,395 some proper HTML here. 26 00:01:08,390 --> 00:01:10,490 So if we inspect this, we go into our elements 27 00:01:10,490 --> 00:01:16,600 and screw that up to make that touched smaller. 28 00:01:16,595 --> 00:01:18,875 We can actually see that there is no one element, 29 00:01:18,875 --> 00:01:20,335 it's just plain text. 30 00:01:20,330 --> 00:01:21,920 And so that's not always what we want. 31 00:01:21,920 --> 00:01:25,000 Instead, what we want is to use HTML. 32 00:01:24,995 --> 00:01:27,935 And so how this works is you have a selector, 33 00:01:27,935 --> 00:01:30,725 you do dot HTML opening parentheses, 34 00:01:30,724 --> 00:01:32,224 and then you put your HTML in there. 35 00:01:32,225 --> 00:01:33,295 Whatever that HTML is, 36 00:01:33,290 --> 00:01:34,700 it can be a string like this, 37 00:01:34,700 --> 00:01:36,440 or it could be a variable. 38 00:01:36,440 --> 00:01:39,320 And then you just close it with your closing parentheses. 39 00:01:39,320 --> 00:01:41,660 And the semicolon is optional. 40 00:01:41,660 --> 00:01:44,110 So I'll sometimes use it, sometimes not use it. 41 00:01:44,105 --> 00:01:45,755 Let's go ahead and refresh our page. 42 00:01:45,755 --> 00:01:49,045 And now we see we actually have a proper HelloWorld H1. 43 00:01:49,040 --> 00:01:52,700 And in our document object model in our source code here, 44 00:01:52,700 --> 00:01:54,590 what our browser sees it as, 45 00:01:54,590 --> 00:01:56,980 we have a proper H1. 46 00:01:56,975 --> 00:02:01,345 So what's cool about this is we can now go in here and let's write 47 00:02:01,340 --> 00:02:06,750 a span with a class of custom class, 48 00:02:07,270 --> 00:02:10,970 span, text slash span. 49 00:02:10,970 --> 00:02:12,890 So this is getting a little bit hard to 50 00:02:12,890 --> 00:02:19,240 read just because it's getting to be wrapped on, on multiple lines here. 51 00:02:19,235 --> 00:02:21,955 And because I'm pretty zoomed in with my editor. 52 00:02:21,950 --> 00:02:23,870 But if we refresh, 53 00:02:23,870 --> 00:02:26,870 we are going to see there's a span. 54 00:02:26,870 --> 00:02:28,630 Now we can go ahead and select that span. 55 00:02:28,625 --> 00:02:36,335 Once it's created, we can go ahead and select that span text changed. 56 00:02:36,580 --> 00:02:41,560 And we're gonna see that it goes from span text to change. Just like that. 57 00:02:41,555 --> 00:02:44,755 Now, spacing is a little bit off and this is kind of an ugly example, 58 00:02:44,750 --> 00:02:47,840 but it is a very functional example. 59 00:02:47,840 --> 00:02:50,290 And jQuery isn't about making pages look beautiful. 60 00:02:50,285 --> 00:02:51,635 That's what CSS is for. 61 00:02:51,635 --> 00:02:56,555 Jquery is meant to be a shorter way of writing JavaScript. 62 00:02:56,554 --> 00:02:59,514 So there's a difference between HTML and text. 63 00:02:59,510 --> 00:03:01,520 We learned about HTML in the next lesson. 64 00:03:01,520 --> 00:03:04,340 Let's go ahead and learn about dot text. 65 00:03:04,340 --> 00:03:08,030 What I would like you to do for this particular lesson is go ahead and 66 00:03:08,030 --> 00:03:12,860 select an ID or an element or rather doesn't have to be Beidi could be by class name, 67 00:03:12,860 --> 00:03:15,230 could be just select all the divs on the page, 68 00:03:15,230 --> 00:03:19,930 do dot HTML, and then write some actual HTML in there. 69 00:03:19,925 --> 00:03:21,275 And take note. 70 00:03:21,275 --> 00:03:23,135 You can always right-click inspect, 71 00:03:23,135 --> 00:03:25,135 go to Elements tab. 72 00:03:25,130 --> 00:03:30,540 And you can see that there are actual HTML elements in here. 73 00:03:30,550 --> 00:03:34,560 Once you've done that, let's head on over to the next lesson.