1
00:00:02,090 --> 00:00:03,097
Now,

2
00:00:03,097 --> 00:00:04,830
there is another operation

3
00:00:04,830 --> 00:00:07,580
or property to be precise

4
00:00:07,580 --> 00:00:09,510
Related to inserting,

5
00:00:09,510 --> 00:00:10,343
deleting,

6
00:00:10,343 --> 00:00:11,950
or moving elements,

7
00:00:11,950 --> 00:00:16,254
but primarily related to removing and inserting.

8
00:00:16,254 --> 00:00:17,480
On

9
00:00:17,480 --> 00:00:19,070
HTML elements

10
00:00:19,070 --> 00:00:21,780
that you select in your JavaScript code

11
00:00:21,780 --> 00:00:25,040
with get element by ID or a query selector.

12
00:00:25,040 --> 00:00:27,752
On such elements you also have an

13
00:00:27,752 --> 00:00:28,850
inner

14
00:00:28,850 --> 00:00:29,683
HTML

15
00:00:29,683 --> 00:00:31,450
property.

16
00:00:31,450 --> 00:00:34,440
And let me show you how that works.

17
00:00:34,440 --> 00:00:35,804
In this index HTML file

18
00:00:35,804 --> 00:00:38,110
we've got a broad variety of content,

19
00:00:38,110 --> 00:00:39,330
as we all know.

20
00:00:39,330 --> 00:00:42,010
And now let's say we actually

21
00:00:42,010 --> 00:00:44,690
wanna change this paragraph

22
00:00:44,690 --> 00:00:46,424
this first paragraph,

23
00:00:46,424 --> 00:00:50,290
and we want to change the content that's inside of it.

24
00:00:50,290 --> 00:00:54,240
And we actually want to insert a mixture of texts

25
00:00:54,240 --> 00:00:55,073
and

26
00:00:55,073 --> 00:00:57,260
HTML elements.

27
00:00:57,260 --> 00:00:59,001
For this We first of all,

28
00:00:59,001 --> 00:01:01,580
need to get access to that paragraph

29
00:01:01,580 --> 00:01:02,590
and conveniently,

30
00:01:02,590 --> 00:01:04,250
we already got access here

31
00:01:04,250 --> 00:01:06,502
to first paragraph.

32
00:01:06,502 --> 00:01:09,150
It's stored in this variable.

33
00:01:09,150 --> 00:01:11,060
Therefore here at the bottom,

34
00:01:11,060 --> 00:01:14,510
I want to show you this inner HTML property.

35
00:01:14,510 --> 00:01:15,343
And for that,

36
00:01:15,343 --> 00:01:18,090
we can use this first paragraph

37
00:01:18,090 --> 00:01:21,850
and access the inner HTML property.

38
00:01:21,850 --> 00:01:22,683
Now,

39
00:01:22,683 --> 00:01:23,516
inner

40
00:01:23,516 --> 00:01:24,349
HTML

41
00:01:24,349 --> 00:01:26,280
is a bit like text content

42
00:01:27,400 --> 00:01:30,560
where text content gives you access to the

43
00:01:30,560 --> 00:01:32,240
well text content.

44
00:01:32,240 --> 00:01:34,490
So to all the text notes

45
00:01:34,490 --> 00:01:36,990
that are inside of this element,

46
00:01:36,990 --> 00:01:39,058
including texts that might be in

47
00:01:39,058 --> 00:01:41,400
nested elements,

48
00:01:41,400 --> 00:01:42,960
inner HTML

49
00:01:42,960 --> 00:01:46,160
gives you access to all the HTML content

50
00:01:46,160 --> 00:01:48,376
stored in an element.

51
00:01:48,376 --> 00:01:51,000
That could be just the text,

52
00:01:51,000 --> 00:01:55,800
but it would also include other HTML elements.

53
00:01:55,800 --> 00:01:57,800
And to understand this,

54
00:01:57,800 --> 00:02:00,210
let me actually console log,

55
00:02:00,210 --> 00:02:01,800
first paragraph,

56
00:02:01,800 --> 00:02:03,420
inner HTML here

57
00:02:03,420 --> 00:02:05,253
at the end of app JS.

58
00:02:06,300 --> 00:02:07,770
And with that add it,

59
00:02:07,770 --> 00:02:09,366
let's open the developer tools.

60
00:02:09,366 --> 00:02:10,431
You now see,

61
00:02:10,431 --> 00:02:13,363
I get this year in the console.

62
00:02:13,363 --> 00:02:16,120
It's a mixture of text.

63
00:02:16,120 --> 00:02:19,100
I'm new, and this leads to Google

64
00:02:19,100 --> 00:02:23,230
and HTML code does anchor element is part

65
00:02:23,230 --> 00:02:24,963
of this output here.

66
00:02:25,850 --> 00:02:27,290
And that's different.

67
00:02:27,290 --> 00:02:29,960
If we compare it to text content,

68
00:02:29,960 --> 00:02:33,346
if I console lock the text content of first paragraph,

69
00:02:33,346 --> 00:02:36,250
then we get just the text content.

70
00:02:36,250 --> 00:02:37,228
As I mentioned,

71
00:02:37,228 --> 00:02:39,420
this includes the text content

72
00:02:39,420 --> 00:02:42,728
that might be part of nest at HTML elements

73
00:02:42,728 --> 00:02:45,723
like this nested link here.

74
00:02:46,950 --> 00:02:47,783
And by the way,

75
00:02:47,783 --> 00:02:49,550
in case you wondering why we are in the

76
00:02:49,550 --> 00:02:52,080
second paragraph instead of the first one,

77
00:02:52,080 --> 00:02:55,950
keep in mind that we moved this paragraph around here.

78
00:02:55,950 --> 00:02:58,433
So we are operating on the correct one.

79
00:02:59,760 --> 00:03:01,720
So inner HTML contains

80
00:03:01,720 --> 00:03:02,553
the

81
00:03:02,553 --> 00:03:04,460
HTML elements

82
00:03:04,460 --> 00:03:07,680
and it's mostly useful if we are not using it

83
00:03:07,680 --> 00:03:09,020
to read

84
00:03:09,020 --> 00:03:11,100
or output the values,

85
00:03:11,100 --> 00:03:12,070
though, of course

86
00:03:12,070 --> 00:03:14,800
we could have used cases for this as well,

87
00:03:14,800 --> 00:03:17,690
but it is mostly useful if we instead use it

88
00:03:17,690 --> 00:03:21,720
to set some new content with the equal sign,

89
00:03:21,720 --> 00:03:25,940
just as we can do it for text content as well.

90
00:03:25,940 --> 00:03:28,463
But now we'll do it for inner HTML.

91
00:03:29,470 --> 00:03:32,750
Because than here there is a major difference

92
00:03:32,750 --> 00:03:35,104
compared to text content.

93
00:03:35,104 --> 00:03:38,540
Whereas text content asked the names of jests

94
00:03:38,540 --> 00:03:40,830
wants just text.

95
00:03:40,830 --> 00:03:43,405
Inner HTML actually takes a string

96
00:03:43,405 --> 00:03:47,300
that could also contain HTML code.

97
00:03:47,300 --> 00:03:51,770
It can contain text and or HTML code.

98
00:03:51,770 --> 00:03:53,210
So here we could say,

99
00:03:53,210 --> 00:03:54,380
hi,

100
00:03:54,380 --> 00:03:55,440
this

101
00:03:55,440 --> 00:03:56,273
is,

102
00:03:56,273 --> 00:04:00,410
and then I add a strong HTML element

103
00:04:00,410 --> 00:04:02,940
to emphasize the content between the opening

104
00:04:02,940 --> 00:04:04,430
and closing tags.

105
00:04:04,430 --> 00:04:06,603
And here I put important.

106
00:04:07,780 --> 00:04:11,060
If we would use text content

107
00:04:11,060 --> 00:04:12,490
to show this first,

108
00:04:12,490 --> 00:04:14,760
if we would use text content here,

109
00:04:14,760 --> 00:04:16,019
than, if I saved this,

110
00:04:16,019 --> 00:04:17,370
you see this gets

111
00:04:17,370 --> 00:04:19,829
displayed as text.

112
00:04:19,829 --> 00:04:23,150
It's not interpreted as an HTML element.

113
00:04:23,150 --> 00:04:26,220
It's not parsed as such by the browser

114
00:04:26,220 --> 00:04:29,410
and it stands for not translate that into its own

115
00:04:29,410 --> 00:04:30,243
Dom

116
00:04:30,243 --> 00:04:31,170
object.

117
00:04:31,170 --> 00:04:32,500
Strong is not

118
00:04:32,500 --> 00:04:35,533
translated into a Dom element.

119
00:04:36,650 --> 00:04:39,690
Instead it's treated as plain text because

120
00:04:39,690 --> 00:04:42,600
we did set text content here.

121
00:04:42,600 --> 00:04:43,560
But of course,

122
00:04:43,560 --> 00:04:46,540
if we know that we want to insert a mixture of text

123
00:04:46,540 --> 00:04:48,370
and HTML elements,

124
00:04:48,370 --> 00:04:51,890
we can use inner HTML instead.

125
00:04:51,890 --> 00:04:54,000
And if I now save this

126
00:04:54,000 --> 00:04:56,290
then you'll noticed this is bold

127
00:04:56,290 --> 00:04:57,750
because now indeed,

128
00:04:57,750 --> 00:04:59,620
this was interpreted

129
00:04:59,620 --> 00:05:01,470
and parsed as

130
00:05:01,470 --> 00:05:03,320
a HTML element.

131
00:05:03,320 --> 00:05:05,663
So like all the other elements here,

132
00:05:06,920 --> 00:05:08,880
and that's pretty nice to have,

133
00:05:08,880 --> 00:05:10,080
because

134
00:05:10,080 --> 00:05:11,220
in the end,

135
00:05:11,220 --> 00:05:14,620
this means that if you have more complex content

136
00:05:14,620 --> 00:05:16,250
that should be inserted,

137
00:05:16,250 --> 00:05:18,600
you can do it with inner HTML

138
00:05:18,600 --> 00:05:21,030
instead of creating elements with

139
00:05:21,030 --> 00:05:22,390
create element

140
00:05:22,390 --> 00:05:24,760
and upending them manually.

141
00:05:24,760 --> 00:05:28,160
As we're doing it up here in this example,

142
00:05:28,160 --> 00:05:28,993
on the other hand,

143
00:05:28,993 --> 00:05:31,220
doing it like this has the huge advantage

144
00:05:31,220 --> 00:05:34,870
that you have all the JavaScript configuration options

145
00:05:34,870 --> 00:05:36,453
for the created element.

146
00:05:37,430 --> 00:05:38,263
For example,

147
00:05:38,263 --> 00:05:39,830
if you want to add an event listener

148
00:05:39,830 --> 00:05:42,060
to the new anchor element here,

149
00:05:42,060 --> 00:05:44,800
you can easily do that because we create

150
00:05:44,800 --> 00:05:46,062
new anchor element here

151
00:05:46,062 --> 00:05:48,670
in our JavaScript code anyways.

152
00:05:48,670 --> 00:05:50,623
So we have direct access to it.

153
00:05:51,730 --> 00:05:54,210
That would be more difficult if you do it with

154
00:05:54,210 --> 00:05:55,860
inner HTML.

155
00:05:55,860 --> 00:05:59,117
Here you would first have to select this element,

156
00:05:59,117 --> 00:06:00,310
for example,

157
00:06:00,310 --> 00:06:01,900
by giving it an ID

158
00:06:01,900 --> 00:06:04,363
and then using get element by ID.

159
00:06:05,240 --> 00:06:09,790
But if you don't need direct access to the HTML elements,

160
00:06:09,790 --> 00:06:11,220
which you want to create,

161
00:06:11,220 --> 00:06:14,023
then of course you can use inner HTML

162
00:06:14,023 --> 00:06:14,930
to

163
00:06:14,930 --> 00:06:15,790
just

164
00:06:15,790 --> 00:06:17,580
output a mixture of text

165
00:06:17,580 --> 00:06:18,530
and or

166
00:06:18,530 --> 00:06:19,370
HTML

167
00:06:19,370 --> 00:06:20,680
elements.

168
00:06:20,680 --> 00:06:23,773
And the HTML code you have in this string

169
00:06:23,773 --> 00:06:27,055
can be as complex as you want.

170
00:06:27,055 --> 00:06:28,680
Just keep in mind

171
00:06:28,680 --> 00:06:31,470
that you're not allowed to add line breaks here.

172
00:06:31,470 --> 00:06:33,620
So readability could be an issue

173
00:06:33,620 --> 00:06:35,530
if this becomes more complex

174
00:06:35,530 --> 00:06:38,720
and whilst JavaScript past solutions for this as well,

175
00:06:38,720 --> 00:06:40,720
we can ignore them for the moment.

176
00:06:40,720 --> 00:06:42,900
If you would want a line break here,

177
00:06:42,900 --> 00:06:43,733
you could,

178
00:06:43,733 --> 00:06:48,000
of course added by concatenating another value.

179
00:06:48,000 --> 00:06:49,510
So by adding a plus here

180
00:06:49,510 --> 00:06:51,220
and then starting a new line,

181
00:06:51,220 --> 00:06:52,480
because in that case

182
00:06:52,480 --> 00:06:55,500
a line break would actually be allowed,

183
00:06:55,500 --> 00:06:58,040
but that's just some additional knowledge

184
00:06:58,040 --> 00:06:59,700
which I wanted to pass on here.

185
00:06:59,700 --> 00:07:01,580
The most important takeaway here

186
00:07:01,580 --> 00:07:04,109
is that you have this inner HTML property

187
00:07:04,109 --> 00:07:05,793
and that you can use it

188
00:07:05,793 --> 00:07:06,880
to

189
00:07:06,880 --> 00:07:07,713
output

190
00:07:07,713 --> 00:07:08,578
some text

191
00:07:08,578 --> 00:07:10,400
HTML mixture

192
00:07:10,400 --> 00:07:14,150
and force the browser to parse and display it

193
00:07:14,150 --> 00:07:17,950
just as it's displaying all the other HTML code

194
00:07:17,950 --> 00:07:19,533
that makes up your page.