1
00:00:02,120 --> 00:00:04,180
Now last but not least,

2
00:00:04,180 --> 00:00:07,870
let's see how we can move elements around

3
00:00:07,870 --> 00:00:09,950
so how we can move existing elements,

4
00:00:09,950 --> 00:00:13,043
because that's also sometimes something you want to do.

5
00:00:13,900 --> 00:00:16,850
And we only have these two paragraphs

6
00:00:16,850 --> 00:00:18,950
and their links at this point.

7
00:00:18,950 --> 00:00:21,580
And let's say, we simply want to switch order.

8
00:00:21,580 --> 00:00:25,160
So let's say we want to take this first paragraph

9
00:00:25,160 --> 00:00:29,300
and move it off after our second paragraph,

10
00:00:29,300 --> 00:00:32,323
so that the two effectively switch position.

11
00:00:33,170 --> 00:00:36,740
For this, we need to get access to this first paragraph,

12
00:00:36,740 --> 00:00:39,070
and we already did do that here.

13
00:00:39,070 --> 00:00:42,413
So I will use this first paragraph variable again,

14
00:00:43,330 --> 00:00:46,130
and then we will basically just do something

15
00:00:46,130 --> 00:00:48,150
which we already did before

16
00:00:48,150 --> 00:00:51,330
when we inserted a new element.

17
00:00:51,330 --> 00:00:55,120
I will select the parent element of the place where I want

18
00:00:55,120 --> 00:00:57,970
to insert the element that should be moved.

19
00:00:57,970 --> 00:01:01,430
And then we can call append or insert before

20
00:01:01,430 --> 00:01:04,480
to insert this element that should be moved

21
00:01:04,480 --> 00:01:07,093
in some place inside of that parent element.

22
00:01:08,070 --> 00:01:09,010
So here,

23
00:01:09,010 --> 00:01:10,540
since I want to move the paragraph

24
00:01:10,540 --> 00:01:12,410
after this other paragraph,

25
00:01:12,410 --> 00:01:14,590
I'll select the body since this is

26
00:01:14,590 --> 00:01:17,740
the parent off the place where I want to insert it,

27
00:01:17,740 --> 00:01:21,530
and then I will just append this first paragraph into body,

28
00:01:21,530 --> 00:01:24,720
which will then effectively insert this paragraph

29
00:01:24,720 --> 00:01:27,710
at the end of all the elements inside of body

30
00:01:27,710 --> 00:01:31,220
and therefore after the second paragraph.

31
00:01:31,220 --> 00:01:34,700
And since I'll be doing that on an existing element

32
00:01:34,700 --> 00:01:36,500
instead of a new element,

33
00:01:36,500 --> 00:01:39,790
the browser will automatically remove the element here

34
00:01:39,790 --> 00:01:42,610
and move it to the new position.

35
00:01:42,610 --> 00:01:45,060
So I don't need to delete the old element,

36
00:01:45,060 --> 00:01:47,323
instead the browser will move it for me.

37
00:01:48,750 --> 00:01:53,190
So here we can say first paragraph dot parent element,

38
00:01:53,190 --> 00:01:54,770
which is the body,

39
00:01:54,770 --> 00:01:58,040
append first paragraph,

40
00:01:58,040 --> 00:02:01,930
so to append the first paragraph at the end of the body,

41
00:02:01,930 --> 00:02:05,170
which is the parent element of the first paragraph.

42
00:02:05,170 --> 00:02:10,110
If we save that, then you see indeed, this

43
00:02:10,110 --> 00:02:12,420
I'm new this leads to Google paragraph

44
00:02:12,420 --> 00:02:15,300
is now the second paragraph appended

45
00:02:15,300 --> 00:02:17,660
at the end of body here.

46
00:02:17,660 --> 00:02:20,410
And that's how we can move elements around.

47
00:02:20,410 --> 00:02:22,360
You can move them around by selecting

48
00:02:22,360 --> 00:02:25,460
the parent of the place where they should be inserted

49
00:02:25,460 --> 00:02:29,770
and then using append or insert before there

50
00:02:29,770 --> 00:02:32,763
to insert the element there in that place.

51
00:02:33,950 --> 00:02:37,390
And with that, we now know how to add elements,

52
00:02:37,390 --> 00:02:39,170
how to remove elements,

53
00:02:39,170 --> 00:02:41,813
and how to move elements around.