1
00:00:02,150 --> 00:00:05,530
Now let's start with adding elements.

2
00:00:05,530 --> 00:00:06,800
And for this, let's say

3
00:00:06,800 --> 00:00:09,120
we want to write JavaScript code.

4
00:00:09,120 --> 00:00:10,240
That adds a

5
00:00:10,240 --> 00:00:11,850
new link

6
00:00:11,850 --> 00:00:14,940
inside of this first paragraph,

7
00:00:14,940 --> 00:00:16,410
a new link

8
00:00:16,410 --> 00:00:18,073
in this paragraph.

9
00:00:19,040 --> 00:00:21,227
For this, I'll go back to app JS,

10
00:00:21,227 --> 00:00:22,850
or first of all,

11
00:00:22,850 --> 00:00:25,490
I'll import app JS again.

12
00:00:25,490 --> 00:00:28,653
I'll change this script source back to app JS.

13
00:00:29,670 --> 00:00:31,080
And then in app JS,

14
00:00:31,080 --> 00:00:33,973
we now need to do three main things.

15
00:00:34,836 --> 00:00:39,380
When we want to add an element, then we, first of all,

16
00:00:39,380 --> 00:00:43,070
have to create the new element.

17
00:00:43,070 --> 00:00:45,499
Then we have to get access to the

18
00:00:45,499 --> 00:00:47,890
parent element

19
00:00:47,890 --> 00:00:49,910
that should hold the

20
00:00:49,910 --> 00:00:53,690
new element because we need to insert it somewhere

21
00:00:53,690 --> 00:00:55,140
in the Dom. And for that,

22
00:00:55,140 --> 00:00:57,360
we need to get access to the element

23
00:00:57,360 --> 00:00:59,720
where it should be inserted into.

24
00:00:59,720 --> 00:01:02,340
And then we need to insert

25
00:01:02,340 --> 00:01:04,069
the new element

26
00:01:04,069 --> 00:01:07,760
into the parent element content.

27
00:01:07,760 --> 00:01:11,060
And these are the three steps we typically execute.

28
00:01:11,060 --> 00:01:14,363
When we create an add new elements.

29
00:01:15,579 --> 00:01:18,743
Now let's start with creating a new element.

30
00:01:19,640 --> 00:01:22,000
How can we create a brand new

31
00:01:22,000 --> 00:01:23,550
HTML element

32
00:01:23,550 --> 00:01:24,830
in JavaScript?

33
00:01:24,830 --> 00:01:28,170
So without touching our HTML code,

34
00:01:28,170 --> 00:01:32,250
maybe because we want to insert it when a timer expired or

35
00:01:32,250 --> 00:01:34,090
when a button was clicked,

36
00:01:34,090 --> 00:01:35,730
not something we're doing right now,

37
00:01:35,730 --> 00:01:38,920
but that could be scenarios where some elements should be

38
00:01:38,920 --> 00:01:41,060
added when a certain event occurs

39
00:01:42,450 --> 00:01:47,070
and therefore to create a new element in such scenarios.

40
00:01:47,070 --> 00:01:50,800
We again use to document our bridge to the Dom.

41
00:01:50,800 --> 00:01:52,772
And this document does not just

42
00:01:52,772 --> 00:01:57,217
have methods for selecting elements in the Dom,

43
00:01:57,217 --> 00:02:00,780
but it also has a create element method for

44
00:02:00,780 --> 00:02:01,720
guest what?

45
00:02:01,720 --> 00:02:03,673
Creating a new element.

46
00:02:05,610 --> 00:02:08,690
Now create element wants a parameter

47
00:02:08,690 --> 00:02:12,093
and which parameter value could be expected here.

48
00:02:13,520 --> 00:02:16,280
Well, if you want to create a new

49
00:02:16,280 --> 00:02:18,070
HTML element,

50
00:02:18,070 --> 00:02:20,240
you need to let the browser know

51
00:02:20,240 --> 00:02:21,970
which kind of element it is.

52
00:02:21,970 --> 00:02:24,260
So the element name is it

53
00:02:24,260 --> 00:02:27,300
a paragraph anchor element and image?

54
00:02:27,300 --> 00:02:30,041
You need to let the browser know,

55
00:02:30,041 --> 00:02:33,410
and here I want to create an anchor element.

56
00:02:33,410 --> 00:02:35,600
So I will type A here

57
00:02:36,500 --> 00:02:37,700
and that's important.

58
00:02:37,700 --> 00:02:40,240
We don't have the angle brackets here.

59
00:02:40,240 --> 00:02:42,960
Instead, we just have the element name,

60
00:02:42,960 --> 00:02:45,780
and we even get this suggestion menu here,

61
00:02:45,780 --> 00:02:49,610
which only suggests us valid HTML element

62
00:02:49,610 --> 00:02:51,550
names like A,

63
00:02:51,550 --> 00:02:55,083
and then this will create a new anchor element.

64
00:02:56,245 --> 00:02:59,330
Now very important at this point of time,

65
00:02:59,330 --> 00:03:01,843
this element is not part of the page yet.

66
00:03:01,843 --> 00:03:05,260
It will not be visible on the page.

67
00:03:05,260 --> 00:03:06,990
If I save this code,

68
00:03:06,990 --> 00:03:09,695
you don't find this anchor element here.

69
00:03:09,695 --> 00:03:12,200
You only find the old link here,

70
00:03:12,200 --> 00:03:15,780
but nowhere in this Dom, do you find the

71
00:03:15,780 --> 00:03:17,590
new anchor element

72
00:03:18,540 --> 00:03:19,600
instead of this just

73
00:03:19,600 --> 00:03:23,143
created and for the moment only stored in memory,

74
00:03:24,040 --> 00:03:26,140
that's why we need steps two and three

75
00:03:26,140 --> 00:03:30,710
to then insert it into the Dom in a certain place.

76
00:03:30,710 --> 00:03:33,612
where we want to have that new element.

77
00:03:33,612 --> 00:03:36,513
And therefore we want to store it in a variable,

78
00:03:36,513 --> 00:03:40,370
so that we can use it in these next steps,

79
00:03:40,370 --> 00:03:43,250
because create element returns a value,

80
00:03:43,250 --> 00:03:45,320
the created element, and hence

81
00:03:45,320 --> 00:03:47,057
we can store it in a variable,

82
00:03:47,057 --> 00:03:50,890
which we could name new anchor element

83
00:03:52,070 --> 00:03:54,920
because that's, what's stored in there a

84
00:03:54,920 --> 00:03:55,753
new

85
00:03:55,753 --> 00:03:56,586
anchor

86
00:03:56,586 --> 00:03:57,419
element.

87
00:03:58,810 --> 00:04:01,750
Now we want to get access to the parent element that should

88
00:04:01,750 --> 00:04:04,020
hold the new element

89
00:04:04,020 --> 00:04:06,500
because that is how you typically insert

90
00:04:06,500 --> 00:04:08,262
elements into your Dom.

91
00:04:08,262 --> 00:04:11,190
You select the parent, and then you add

92
00:04:11,190 --> 00:04:13,673
your new element into that parent.

93
00:04:14,980 --> 00:04:18,100
Now, here, the parent could be this paragraph.

94
00:04:18,100 --> 00:04:21,230
If we want to insert our anchor elements there

95
00:04:22,250 --> 00:04:24,930
So to get access to this paragraph here,

96
00:04:24,930 --> 00:04:27,510
we can add another of variable

97
00:04:27,510 --> 00:04:28,610
first

98
00:04:28,610 --> 00:04:29,970
paragraph.

99
00:04:29,970 --> 00:04:30,920
And for example,

100
00:04:30,920 --> 00:04:34,440
get access with document query selector

101
00:04:34,440 --> 00:04:38,470
P selecting by the paragraph tag,

102
00:04:38,470 --> 00:04:42,100
and as explained, this will find us the first paragraph.

103
00:04:42,100 --> 00:04:43,430
It finds on the page.

104
00:04:43,430 --> 00:04:46,883
And that's exactly the paragraph element I'm interested in.

105
00:04:47,720 --> 00:04:49,780
So that's one way of selecting this

106
00:04:49,780 --> 00:04:51,983
first paragraph on the page.

107
00:04:53,280 --> 00:04:55,160
Now I did store this in a variable

108
00:04:55,160 --> 00:04:59,230
so that in the next line, we can operate on this

109
00:04:59,230 --> 00:05:02,210
saved first paragraph element

110
00:05:02,210 --> 00:05:05,680
and then insert our anchor element.

111
00:05:05,680 --> 00:05:07,830
But I'll actually do that down there

112
00:05:07,830 --> 00:05:10,748
because here I'm describing this step.

113
00:05:10,748 --> 00:05:13,730
So we get access to our first paragraph,

114
00:05:13,730 --> 00:05:16,700
and now we need to find out how we can insert

115
00:05:16,700 --> 00:05:19,830
this anchor element into this paragraph.

116
00:05:19,830 --> 00:05:22,554
And we do that with the append

117
00:05:22,554 --> 00:05:25,220
or the append child methods.

118
00:05:25,220 --> 00:05:27,593
You can basically use either of the two.

119
00:05:28,600 --> 00:05:30,313
Here, I'll just go for append.

120
00:05:31,270 --> 00:05:33,290
And this now wants the

121
00:05:33,290 --> 00:05:35,070
new note,

122
00:05:35,070 --> 00:05:38,090
either a text note or an HTML element note,

123
00:05:38,090 --> 00:05:41,790
which we have here, that should be appended into that

124
00:05:41,790 --> 00:05:45,360
paragraph so that it should be inserted into this paragraph

125
00:05:45,360 --> 00:05:50,030
after all the other existing children in that paragraph.

126
00:05:50,030 --> 00:05:51,773
That's what append does.

127
00:05:52,780 --> 00:05:54,520
There also is

128
00:05:54,520 --> 00:05:55,600
insert

129
00:05:55,600 --> 00:05:56,433
before

130
00:05:56,433 --> 00:05:59,600
if you want to it before a certain element,

131
00:05:59,600 --> 00:06:03,890
but here I want to append it because that's easiest to use.

132
00:06:03,890 --> 00:06:07,467
An append now also wants a parameter value,

133
00:06:07,467 --> 00:06:10,890
and that is the elements that should be appended.

134
00:06:10,890 --> 00:06:13,850
So we have the element on which it is appended,

135
00:06:13,850 --> 00:06:15,680
so into which it is inserted

136
00:06:15,680 --> 00:06:17,870
and then two append will pass

137
00:06:17,870 --> 00:06:20,840
the element that should be appended

138
00:06:20,840 --> 00:06:22,010
in our case,

139
00:06:22,010 --> 00:06:22,843
the new

140
00:06:22,843 --> 00:06:23,810
anchor

141
00:06:23,810 --> 00:06:25,340
element

142
00:06:25,340 --> 00:06:29,223
and that will now appended into this first paragraph.

143
00:06:31,020 --> 00:06:34,400
Now, if I saved it, we see no change here,

144
00:06:34,400 --> 00:06:38,047
but if I expand my paragraph here on the right,

145
00:06:38,047 --> 00:06:41,780
I actually do see this new anchor element here

146
00:06:41,780 --> 00:06:44,106
inserted after this text note,

147
00:06:44,106 --> 00:06:48,810
which already was part of the paragraph because of append.

148
00:06:48,810 --> 00:06:51,927
As I mentioned, this does add it at the end,

149
00:06:51,927 --> 00:06:54,480
but of course it is a useless link.

150
00:06:54,480 --> 00:06:57,920
It has no text between the opening and closing tax.

151
00:06:57,920 --> 00:07:00,540
And this has no destination either.

152
00:07:00,540 --> 00:07:04,870
And I guess that makes sense because how would it have any

153
00:07:04,870 --> 00:07:07,956
content after all? We just create an element here,

154
00:07:07,956 --> 00:07:11,466
but we say nothing about its text content.

155
00:07:11,466 --> 00:07:14,695
So the part between the opening and closing tags

156
00:07:14,695 --> 00:07:16,723
or its destination,

157
00:07:17,580 --> 00:07:19,940
if you want to have such text content

158
00:07:19,940 --> 00:07:24,090
and such a destination, we have to configure it here.

159
00:07:24,090 --> 00:07:26,420
and we can do that in the same way as

160
00:07:26,420 --> 00:07:28,870
we did it for existing elements,

161
00:07:28,870 --> 00:07:31,580
we can set the destination by accessing the

162
00:07:31,580 --> 00:07:33,694
age ref property, and we can set

163
00:07:33,694 --> 00:07:36,200
the text content by accessing the

164
00:07:36,200 --> 00:07:38,866
text content property. that's possible

165
00:07:38,866 --> 00:07:40,986
on our brand new element as well,

166
00:07:40,986 --> 00:07:45,986
because it is just a default standard element in the end.

167
00:07:46,246 --> 00:07:51,197
So here we can access new anchor element dot H ref

168
00:07:51,197 --> 00:07:54,853
and set this to any destination of your choice.

169
00:07:56,280 --> 00:07:58,430
For example, again, google.com

170
00:07:59,440 --> 00:08:01,229
and then sets the text content.

171
00:08:01,229 --> 00:08:04,620
So the part between the opening and closing tags

172
00:08:04,620 --> 00:08:07,211
by accessing this text content property,

173
00:08:07,211 --> 00:08:10,240
and maybe saying this leads

174
00:08:10,240 --> 00:08:11,572
to Google

175
00:08:11,572 --> 00:08:12,903
like this,

176
00:08:14,000 --> 00:08:15,940
and if I now is save that,

177
00:08:15,940 --> 00:08:18,060
now we see this link here

178
00:08:18,060 --> 00:08:20,980
and we see it here, and that has the correct address

179
00:08:20,980 --> 00:08:23,660
and hence clicking, it leads to Google

180
00:08:24,810 --> 00:08:27,420
and that's how we can insert

181
00:08:27,420 --> 00:08:28,300
a new

182
00:08:28,300 --> 00:08:33,299
element into our Dom and how we can configure it in detail.