1
00:00:00,350 --> 00:00:06,210
Hey, in this lesson, we're going to be attending and adding elements, first of all, we need to make

2
00:00:06,210 --> 00:00:07,770
a selection of the parent.

3
00:00:08,040 --> 00:00:10,230
So let's select the parent element.

4
00:00:10,230 --> 00:00:12,330
And this is going to be the top div there.

5
00:00:12,420 --> 00:00:16,080
And then we're going to be adding additional elements before and after that.

6
00:00:16,350 --> 00:00:25,170
So top al and make our selection using document and then query selector and selecting the element with

7
00:00:25,170 --> 00:00:26,700
a class of top.

8
00:00:28,900 --> 00:00:36,130
And then the child that we want to add in, so that's going to be CONSED and let we just call this one

9
00:00:36,220 --> 00:00:41,380
div one and then using the documents, we're going to create an element.

10
00:00:41,380 --> 00:00:43,900
And the element that we're creating is going to be a div.

11
00:00:45,070 --> 00:00:55,900
And then within this div div one, let's add in some text content and I'll just call that div one and

12
00:00:55,900 --> 00:01:04,500
then div one style color and assign a color of red to it so that we can see it or insert it on the page.

13
00:01:05,020 --> 00:01:05,990
So let's save that.

14
00:01:06,850 --> 00:01:08,550
And right now it's not going to do a whole lot.

15
00:01:08,560 --> 00:01:11,530
So when we refresh we don't see a whole lot happening.

16
00:01:11,830 --> 00:01:17,050
So let's go back into the code and or check out what the difference between append and append child

17
00:01:17,050 --> 00:01:17,650
is going to be.

18
00:01:18,190 --> 00:01:27,340
So making a selection of the parent and getting the elements and then using append.

19
00:01:27,730 --> 00:01:34,330
So this is going to allow us to append whatever the child is to the page.

20
00:01:34,780 --> 00:01:36,160
And let's refresh.

21
00:01:36,730 --> 00:01:40,210
So what it's happened now is it's added it on the page.

22
00:01:40,510 --> 00:01:46,840
So we look at the elements, it's added it to the end, so simply appended it to the existing content

23
00:01:47,050 --> 00:01:49,280
within the element with a class of top.

24
00:01:49,660 --> 00:01:55,510
Let's also try the same thing and we'll do an append child.

25
00:01:55,820 --> 00:01:58,480
So it's going to be using that hand child.

26
00:01:58,720 --> 00:02:05,950
And in this case, it's going to work the same way because append and append accepts node objects and

27
00:02:05,950 --> 00:02:10,110
dom strings while append child only accepts node objects.

28
00:02:10,450 --> 00:02:17,920
So let's try that one more time and nothing happens because we can't we're still using that same element.

29
00:02:17,930 --> 00:02:19,830
So we haven't moved it or touched it.

30
00:02:20,350 --> 00:02:22,670
Let's recreate and we'll create a second one.

31
00:02:22,960 --> 00:02:31,010
So div and duty of two and we'll make this one Pelloux and just append two.

32
00:02:31,120 --> 00:02:33,220
So you see that everything works properly.

33
00:02:33,370 --> 00:02:39,940
It's just going to add it into the next available spot that is contained within that element with tops

34
00:02:39,940 --> 00:02:40,690
within the parent.

35
00:02:41,230 --> 00:02:50,080
So if we try to select the top element and we want to append just a string value, we're able to do

36
00:02:50,080 --> 00:02:50,410
that.

37
00:02:51,160 --> 00:02:58,740
So if we do a little world, that's going to allow us to upend the content directly to there.

38
00:02:58,880 --> 00:03:03,760
So it allows us to append node so string value.

39
00:03:04,300 --> 00:03:07,180
But if we do an append a child, this isn't going to work.

40
00:03:07,390 --> 00:03:14,070
It's going to throw an error because it's just going to be it only allows for node objects.

41
00:03:14,410 --> 00:03:17,890
So this is a dumb string string value of hello world.

42
00:03:18,190 --> 00:03:21,250
So it's going to throw an error and we're going to the console.

43
00:03:21,250 --> 00:03:28,900
We see that appen child on node parameter is not type of node, so that hello world is not a node and

44
00:03:28,900 --> 00:03:32,300
in order to create it, then we have to create a node for that.

45
00:03:32,620 --> 00:03:35,860
So there are also a few other differences as well.

46
00:03:36,100 --> 00:03:38,110
So with APPEND.

47
00:03:39,790 --> 00:03:42,860
Does not return a value, whereas a pending child does.

48
00:03:43,300 --> 00:03:45,670
So let's create one.

49
00:03:46,900 --> 00:03:54,840
And that vow to assign the values of whatever gets returned, are you going to comment that one, that

50
00:03:54,850 --> 00:04:00,940
one's just throwing an error and then we'll console lock out whatever foul one and Valetta is equal

51
00:04:00,940 --> 00:04:06,280
to so console log and then Valetta will be the second one that we're logging into the output.

52
00:04:06,490 --> 00:04:09,730
Let's refresh and we get undefined.

53
00:04:10,510 --> 00:04:16,570
The first value in twenty is undefined because once again, the append is not returning back, whereas

54
00:04:16,570 --> 00:04:20,990
the append child is going to return back to the value of the pended value.

55
00:04:21,340 --> 00:04:25,720
So Valetta and Div two are going to be essentially equal.

56
00:04:25,750 --> 00:04:35,080
So whenever we select Div two and we've got Val to add a comment to this one because the append doesn't

57
00:04:35,080 --> 00:04:40,150
actually return back a value, you're going to see that this is still referencing that same memory location

58
00:04:40,420 --> 00:04:41,590
that we were looking at.

59
00:04:42,010 --> 00:04:49,870
So you can also add so append allows you to add multiple times while append child only allows you to

60
00:04:49,870 --> 00:04:50,770
add a once.

61
00:04:51,250 --> 00:04:56,980
So with append you're able to add multiple elements on the page.

62
00:04:57,700 --> 00:05:03,300
So let's clear out some space and we've got append.

63
00:05:03,670 --> 00:05:10,320
So if we want it to append that value and we want it to append this one.

64
00:05:10,630 --> 00:05:14,590
So what it's going to do is because we've already created it's just going to move those.

65
00:05:15,510 --> 00:05:21,750
So let's see what happens here with a Pend, so what it happened here is it changed the order of it,

66
00:05:22,050 --> 00:05:25,950
so it took the text and then it did div one and div two.

67
00:05:28,030 --> 00:05:34,480
Because it's still, again, referencing that same memory location and whereas we can't do multiple

68
00:05:34,900 --> 00:05:42,300
items, and even if they are the element divs there, we're still not going to be able to pan them.

69
00:05:42,310 --> 00:05:45,700
So it only allows us to do the one append of that value.

70
00:05:46,150 --> 00:05:50,010
So what it does is it adds the first one, but it's going to ignore the rest of them.

71
00:05:51,110 --> 00:05:59,240
So if I comment that out and if I comment on it and if I comment that out, so that should be the only

72
00:05:59,240 --> 00:06:03,150
one that we're referencing for.

73
00:06:03,200 --> 00:06:04,340
And I do need to.

74
00:06:05,590 --> 00:06:12,730
Common to that value, so let's go back in and it's only going to append the div one, whereas div two

75
00:06:12,730 --> 00:06:18,550
still exists, but using append child, you can't have multiple parameters in there.

76
00:06:20,000 --> 00:06:25,340
So you can only have the one, and that's why it's only appending that one, whereas APPEND allows us

77
00:06:25,340 --> 00:06:28,380
to append multiple items on the page.

78
00:06:28,880 --> 00:06:32,290
So with JavaScript, there's also prepend.

79
00:06:33,020 --> 00:06:35,460
So we showed you what append does.

80
00:06:35,480 --> 00:06:39,070
So let's create another div and this is the one that we're going to prepend.

81
00:06:39,650 --> 00:06:43,310
So let's give it another color so we can see it on the screen.

82
00:06:43,640 --> 00:06:50,570
And I'm going to actually commentate this stuff here and take a look at what we've got now where we're

83
00:06:50,570 --> 00:06:51,940
going to do a prepend.

84
00:06:52,340 --> 00:06:54,650
So same as we were doing at the app.

85
00:06:54,650 --> 00:06:59,300
And we select the parent and then from the parent.

86
00:07:01,370 --> 00:07:09,140
We can run the prepend and there's no prepend child, there's only prepend, and this is the opposite

87
00:07:09,140 --> 00:07:13,480
of append where it allows you to add the elements.

88
00:07:13,520 --> 00:07:19,170
So let's do this three and we'll add that to the end.

89
00:07:19,730 --> 00:07:23,450
So what happened here is it added it actually to the beginning.

90
00:07:23,450 --> 00:07:23,700
So.

91
00:07:23,730 --> 00:07:29,070
So this was in the beginning where Prepend adds up to the beginning and up and adds up to the end.

92
00:07:29,630 --> 00:07:35,420
So if I have div one and let's also do they have two here.

93
00:07:35,420 --> 00:07:41,240
So we're prepared div three and two prepend it and actually let me update this to happen.

94
00:07:41,570 --> 00:07:51,020
So what happened here is that we pretended first, we pretended div three, then we pretended div two

95
00:07:51,230 --> 00:07:57,260
and then we did and append of div one so that it to the end and that's where we got the order of three

96
00:07:57,260 --> 00:07:57,950
to one.