1
00:00:00,000 --> 00:00:05,340
In our last lesson, we appended and prepended some HTML to our page in this lesson,

2
00:00:05,340 --> 00:00:10,430
let's go ahead and add some HTML before and after an elements.

3
00:00:10,430 --> 00:00:16,140
So let's give this a div with an id of target.

4
00:00:16,140 --> 00:00:18,600
And there's not going to be anything in here.

5
00:00:18,600 --> 00:00:21,630
Now, I'd like, let's put something in here.

6
00:00:21,630 --> 00:00:26,460
Add HTML before and after this.

7
00:00:26,460 --> 00:00:31,140
And so let's go ahead and because everything in jQuery is basically select or base,

8
00:00:31,140 --> 00:00:33,140
let's select that target.

9
00:00:33,135 --> 00:00:38,585
We can even do div ID target.

10
00:00:38,585 --> 00:00:41,375
Then we can do dot before.

11
00:00:41,375 --> 00:00:45,295
And that's just literally dot before.

12
00:00:45,290 --> 00:00:48,310
And let's put an h3 in here.

13
00:00:48,305 --> 00:00:51,815
Helloworld, This is a title.

14
00:00:52,360 --> 00:00:54,920
And let's do it again.

15
00:00:54,920 --> 00:00:59,990
Let's select a Div selected by its ID,

16
00:00:59,990 --> 00:01:02,170
and then let's do after.

17
00:01:02,165 --> 00:01:05,225
And let's do a paragraph in here.

18
00:01:05,225 --> 00:01:08,905
This is a paragraph.

19
00:01:09,730 --> 00:01:15,820
And so what our pages now we're going to do is it's going to select this element.

20
00:01:15,815 --> 00:01:18,575
And before this element, just before it.

21
00:01:18,570 --> 00:01:20,640
Right in here.

22
00:01:20,635 --> 00:01:23,605
If I could spell any words correctly,

23
00:01:23,605 --> 00:01:25,065
right in here is going to say,

24
00:01:25,060 --> 00:01:27,760
it's going to say hello world, this has a title.

25
00:01:27,760 --> 00:01:32,400
And afterwards it's going to say with some sort of paragraph in here.

26
00:01:32,395 --> 00:01:38,115
This is a paragraph and this one is actually going to be an h3.

27
00:01:38,110 --> 00:01:39,640
So it's going to look something like this.

28
00:01:39,640 --> 00:01:42,670
Now let's go ahead and get rid of that so we don't have that in here.

29
00:01:42,670 --> 00:01:46,020
And delete, delete, delete, save.

30
00:01:46,015 --> 00:01:48,295
Let's view our source code first.

31
00:01:48,295 --> 00:01:50,635
Make sure that it's not actually adding anything in there.

32
00:01:50,635 --> 00:01:55,785
And let's go ahead and refresh this Hello World.

33
00:01:55,780 --> 00:01:59,670
This is a title at HTML before and after this, and this is a paragraph.

34
00:01:59,665 --> 00:02:04,975
And if you don't have your console open or your dev tools, you can right-click.

35
00:02:04,970 --> 00:02:06,230
You can go to Inspect,

36
00:02:06,230 --> 00:02:07,850
opened up the elements tab,

37
00:02:07,850 --> 00:02:09,790
and you can see there's now an H3.

38
00:02:09,785 --> 00:02:12,905
There's the same div that we originally targeted,

39
00:02:12,905 --> 00:02:15,215
and there's a paragraph after it.

40
00:02:15,215 --> 00:02:18,965
Now, just like in the last lesson,

41
00:02:18,965 --> 00:02:22,505
we can, if we wanted to chain these together.

42
00:02:22,505 --> 00:02:25,165
And so we only need to select this once and then we could

43
00:02:25,160 --> 00:02:27,790
say before and after and do these things.

44
00:02:27,785 --> 00:02:29,065
Let's go ahead and save this actually,

45
00:02:29,060 --> 00:02:32,410
let's go ahead and make sure that caching isn't happening.

46
00:02:32,405 --> 00:02:34,255
And we'll just put a number two in there so we know that

47
00:02:34,250 --> 00:02:36,350
this is working the way we expect it to work.

48
00:02:36,350 --> 00:02:39,710
So go ahead and refresh. Hello world.

49
00:02:39,710 --> 00:02:40,900
This is the title number two.

50
00:02:40,895 --> 00:02:43,345
This is a paragraph number two.

51
00:02:43,340 --> 00:02:48,010
And that is how we add HTML before and after an element.

52
00:02:48,005 --> 00:02:50,405
Now what I would like you to do is the same thing.

53
00:02:50,405 --> 00:02:54,355
Just mimic what I've been doing in these videos just to get some hands-on experience.

54
00:02:54,350 --> 00:02:58,660
And again, I can't say this enough is when you're learning to code,

55
00:02:58,655 --> 00:03:01,535
you can watch as many videos as you like.

56
00:03:01,535 --> 00:03:05,485
But nothing is going to compare to actually getting some hands on experience and

57
00:03:05,480 --> 00:03:09,470
being able to write it and to be able to create muscle memory.

58
00:03:09,470 --> 00:03:11,420
So go ahead and give this a shot.

59
00:03:11,420 --> 00:03:15,040
When you are done that, let's head on over to the next lesson,

60
00:03:15,035 --> 00:03:20,525
where we actually select an element from the page and completely deleted.