1 00:00:00,000 --> 00:00:04,110 Okay, let's talk about appending and prepending HTML. 2 00:00:04,110 --> 00:00:08,070 And so what we're going to do is we're going to select an element. 3 00:00:08,070 --> 00:00:09,720 And then we're going to add some, 4 00:00:09,720 --> 00:00:13,230 some more element or some more text at the back of 5 00:00:13,230 --> 00:00:17,040 it and the front of it inside of that particular element. 6 00:00:17,040 --> 00:00:21,680 So what we've seen before is we could have like an H1 with some text in here. 7 00:00:21,675 --> 00:00:28,255 And we've been able to select that one and then use dot HTML to put more HTML in there. 8 00:00:28,255 --> 00:00:32,455 But let's say we wanted to add 9 00:00:32,450 --> 00:00:36,620 a span at the end or we wanted to add a span at the beginning. 10 00:00:36,620 --> 00:00:39,860 Well, we'd have to pull all of this out stored in a variable, 11 00:00:39,860 --> 00:00:43,280 overwrite that variable with HTML inside of it. 12 00:00:43,280 --> 00:00:45,690 There's actually a better way to do this. 13 00:00:47,320 --> 00:00:49,370 So first things first, 14 00:00:49,370 --> 00:00:55,280 let's go ahead and do a document dot ready function. 15 00:00:55,280 --> 00:01:00,890 And that just allows us to put our jQuery code in here safely. 16 00:01:00,890 --> 00:01:03,880 Let's go ahead and select that h one. 17 00:01:03,875 --> 00:01:06,935 K one is selected. 18 00:01:06,935 --> 00:01:09,935 Now I can use append, 19 00:01:09,934 --> 00:01:14,814 APP END OR prepend. 20 00:01:14,810 --> 00:01:16,910 Append goes to the back, 21 00:01:16,910 --> 00:01:18,050 prepend goes to the front. 22 00:01:18,050 --> 00:01:19,850 So let's do append, 23 00:01:19,850 --> 00:01:21,530 and let's add some HTML in here. 24 00:01:21,530 --> 00:01:26,250 Let's add strong. This is bold. 25 00:01:26,440 --> 00:01:29,990 And that's, again, that's going to select this H1, 26 00:01:29,990 --> 00:01:33,640 and it's just going to append some stuff in here. 27 00:01:33,635 --> 00:01:36,755 So let's go ahead and save our page and refresh. 28 00:01:36,755 --> 00:01:41,165 And you can actually see that when we inspect here h one, 29 00:01:41,165 --> 00:01:44,105 at the end of it, we have HTML, 30 00:01:44,105 --> 00:01:46,595 we have strong, this is bold. 31 00:01:46,810 --> 00:01:50,120 And in fact, that was a bad example because it's hard to see. 32 00:01:50,120 --> 00:01:52,730 Let's do underline. There we go. 33 00:01:52,730 --> 00:01:55,100 This is Bolden is underlined. 34 00:01:55,100 --> 00:01:56,930 Let's make sure that's consistent. 35 00:01:56,930 --> 00:01:59,320 Consistent copywriting there. 36 00:01:59,315 --> 00:02:04,265 So this has some text in here. This is underlined. 37 00:02:04,810 --> 00:02:11,890 We could also select that same H1 and we could do prepend. 38 00:02:11,885 --> 00:02:14,465 And let's do a tally six. 39 00:02:14,465 --> 00:02:17,645 This is italics. 40 00:02:18,520 --> 00:02:23,350 And what this is going to do is put some code at the very beginning. 41 00:02:23,345 --> 00:02:25,985 Code in here. 42 00:02:28,420 --> 00:02:30,850 And that's exactly what it does. 43 00:02:30,845 --> 00:02:32,935 It says this is italics in our H1, 44 00:02:32,930 --> 00:02:36,430 we've got i some text you, 45 00:02:36,425 --> 00:02:40,265 but in our source code, we don't have any of that. 46 00:02:40,265 --> 00:02:46,835 And so now we are dynamically marking up our page just using JavaScript and jQuery. 47 00:02:46,835 --> 00:02:49,765 Now a fun little thing here is if we wanted to, 48 00:02:49,760 --> 00:02:51,340 we could chain these together. 49 00:02:51,335 --> 00:02:53,635 So let's go ahead and put this on 50 00:02:53,630 --> 00:02:56,090 a new line because JavaScript doesn't care about new lines. 51 00:02:56,090 --> 00:02:58,390 And let's go ahead and get rid of this one. 52 00:02:58,385 --> 00:03:01,235 And so we're going to select this one, 53 00:03:01,235 --> 00:03:02,345 and then we're going to append, 54 00:03:02,345 --> 00:03:03,715 then we're going to prepend. 55 00:03:03,710 --> 00:03:06,920 And what this looks like essentially is just this. 56 00:03:06,920 --> 00:03:08,840 We're changing it together. 57 00:03:08,840 --> 00:03:12,010 But we can put these on new lines. 58 00:03:12,005 --> 00:03:13,655 So it just looks a little nicer. 59 00:03:13,655 --> 00:03:15,955 And this will apply both of them together. 60 00:03:15,950 --> 00:03:19,910 So let's right in here and in here, number two, 61 00:03:19,910 --> 00:03:21,860 so that we know this is actually working, 62 00:03:21,860 --> 00:03:26,760 that this isn't just executing the same code from the last example. 63 00:03:27,670 --> 00:03:32,690 So let's refresh our source code and we see that nothing has changed in here. 64 00:03:32,690 --> 00:03:35,000 Our jQuery has changed, 65 00:03:35,000 --> 00:03:38,660 but the actual dom hasn't changed the Document Object Model. 66 00:03:38,660 --> 00:03:40,940 Let's go ahead and refresh the document object model. 67 00:03:40,935 --> 00:03:43,315 We're going to see this is italics number two and this 68 00:03:43,310 --> 00:03:45,890 is underlined number two. And that worked. 69 00:03:45,890 --> 00:03:51,280 And all we did was instead of selecting both of them, 70 00:03:51,275 --> 00:03:53,245 we just selected one. 71 00:03:53,240 --> 00:03:56,170 We use one selector and we reuse it. 72 00:03:56,165 --> 00:03:59,185 So we appended and we prepended. 73 00:03:59,180 --> 00:04:04,060 Now what's cool about chaining here is we could also do 2.txt. 74 00:04:04,055 --> 00:04:06,395 This is changed. 75 00:04:06,395 --> 00:04:12,655 Text, then append, then prepend. 76 00:04:12,650 --> 00:04:15,250 And so some text in here is going to say, 77 00:04:15,245 --> 00:04:19,975 this is change text and it changed all of it for me. 78 00:04:19,970 --> 00:04:23,930 So this one no longer has any of the contents that were original to my page. 79 00:04:23,930 --> 00:04:31,240 Jquery has now overwritten all of it and it has prepended and appended some HTML as well. 80 00:04:31,235 --> 00:04:35,545 What I would like you to do as little fun task is go ahead and give this a shot. 81 00:04:35,540 --> 00:04:37,210 You don't have to worry about the text part. 82 00:04:37,205 --> 00:04:39,385 But go ahead and append some HTML, 83 00:04:39,380 --> 00:04:42,880 prepend some HTML2, any selector of your choice. 84 00:04:42,875 --> 00:04:44,375 And then when you're done that, 85 00:04:44,375 --> 00:04:46,745 chain them together like what I've done. 86 00:04:46,745 --> 00:04:49,465 When you're done that, we're going to look at selecting 87 00:04:49,460 --> 00:04:52,390 an element and then adding some HTML outside of it, 88 00:04:52,385 --> 00:04:53,635 but before and after. 89 00:04:53,630 --> 00:04:56,990 So some here and some here, 90 00:04:56,990 --> 00:05:00,440 because right now prepend and append only work on the inside. 91 00:05:00,440 --> 00:05:03,390 We want to now work on the outside.