1
00:00:02,410 --> 00:00:05,680
Do you have an idea when using HTML code like this

2
00:00:05,680 --> 00:00:11,740
or even with the better adjacent HTML method might not be great? Performance is not an issue here with

3
00:00:11,740 --> 00:00:17,800
this adjacent HTML method and also not that we would lose user input, so that's not the reason.

4
00:00:17,800 --> 00:00:25,420
Well a downside of this approach is that you tell the browser which element to render or which content

5
00:00:25,420 --> 00:00:30,490
to render and that can be any HTML content, doesn't have to be a single element, can be any

6
00:00:30,640 --> 00:00:37,480
as complex as you want HTML code. The downside just is you have no direct access to the newly rendered

7
00:00:37,540 --> 00:00:45,400
content. Let's say you would want to later reach out to this paragraph and change it or you inserted

8
00:00:45,430 --> 00:00:52,740
a button and you want to add an event listener, well then you have to do good old div query selector

9
00:00:52,980 --> 00:00:55,480
and query for a paragraph for example,

10
00:00:55,500 --> 00:00:59,160
in this case, we of course fetch the first one because we have to but you get the point,

11
00:00:59,160 --> 00:01:01,380
this would allow us to get access to this paragraph.

12
00:01:01,380 --> 00:01:06,960
Now the more complex the HTML code is you inserted here, the more complex is to query for the right

13
00:01:06,960 --> 00:01:11,790
things so that you get the objects with which you can work, where you can add event listeners, where you

14
00:01:11,790 --> 00:01:13,830
can change the properties and so on.

15
00:01:13,890 --> 00:01:18,220
So the missing direct access to the inserted elements can be a problem.

16
00:01:18,300 --> 00:01:23,520
Of course it's not if you don't plan on doing anything with the inserted elements in your Javascript

17
00:01:23,520 --> 00:01:30,060
code but as soon as you need to add event listeners or change styles or read some values or do anything

18
00:01:30,060 --> 00:01:31,970
else with them in Javascript,

19
00:01:32,040 --> 00:01:38,340
this approach has the downside of not giving you direct access and if you find yourself inserting content

20
00:01:38,340 --> 00:01:45,600
like this and then querying for it thereafter, you're basically running two steps to get access to a

21
00:01:45,600 --> 00:01:52,140
newly added element when there actually is only one step required and that's the case with create element,

22
00:01:52,170 --> 00:01:58,470
with this other approach of adding new elements. So here I reloaded this page on which we worked all

23
00:01:58,470 --> 00:02:05,220
the time and now let's say here in the unordered list, I want to add a list item at the end on which

24
00:02:05,220 --> 00:02:12,050
we can click. Now for that, just as before we can now get access to the list with document query selector

25
00:02:12,080 --> 00:02:16,070
li, not li, ul like this

26
00:02:16,070 --> 00:02:21,830
and now of course we could use innerHTML or insert adjacent HTML but now I'll do something else.

27
00:02:21,830 --> 00:02:28,010
I now want to create a new element node here in Javascript and then append it at the end of the list

28
00:02:28,640 --> 00:02:38,170
and this can be done with document.createElement. Now you always call create element on the document,

29
00:02:38,180 --> 00:02:41,760
you don't call this on any other DOM node or DOM object,

30
00:02:41,840 --> 00:02:45,260
it's always document.createElement.

31
00:02:45,260 --> 00:02:52,580
This creates a new element, a new DOM object, just like you could select it but it creates it from scratch

32
00:02:52,900 --> 00:02:58,850
and it takes at least one argument here and that's the tag name you want to create, so the tag name of

33
00:02:58,850 --> 00:03:00,500
the element you want to create,

34
00:03:00,500 --> 00:03:06,320
in this case li because we want to create a list item, without the brackets, so without the angled brackets,

35
00:03:06,500 --> 00:03:13,010
just the tag name which you find between the angled brackets, so li here to create a list item element.

36
00:03:14,110 --> 00:03:16,570
In case you're wondering about the second argument here,

37
00:03:16,570 --> 00:03:17,670
we don't need that here,

38
00:03:17,710 --> 00:03:24,340
this is actually an object with exactly one property that is supported, the is property and that is related

39
00:03:24,340 --> 00:03:25,870
to custom elements,

40
00:03:25,870 --> 00:03:28,570
a very advanced topic which we'll not cover here,

41
00:03:28,630 --> 00:03:32,910
this is the form in which you use this pretty much all the time.

42
00:03:32,920 --> 00:03:39,340
So here we create a list item and I could hit enter but then we create it and we just let it go into the

43
00:03:39,340 --> 00:03:43,930
void and it will actually get garbage collect because I'm not saving it anywhere.

44
00:03:43,930 --> 00:03:47,290
It creates a new element and it actually returns it,

45
00:03:47,320 --> 00:03:54,460
so now we can store it in a constant maybe which is maybe named new li, of course the name is up to

46
00:03:54,460 --> 00:03:55,170
you

47
00:03:55,480 --> 00:03:59,620
and this curly brace has to go of course.

48
00:04:00,120 --> 00:04:02,640
So now we have the new li available,

49
00:04:02,640 --> 00:04:03,700
if I output it here,

50
00:04:03,750 --> 00:04:04,560
here it is

51
00:04:04,560 --> 00:04:09,420
but of course if I hover over that, that's not getting highlighted in on the left here because it hasn't

52
00:04:09,420 --> 00:04:11,100
been inserted anywhere

53
00:04:11,100 --> 00:04:12,810
but now we can do that.

54
00:04:12,810 --> 00:04:20,310
Now we can reach out to our list which we got access to earlier and we can insert li here with append

55
00:04:20,520 --> 00:04:21,690
child for example.

56
00:04:21,690 --> 00:04:23,090
This takes any node,

57
00:04:23,250 --> 00:04:29,100
actually you could also pass a text node here but you typically don't create text nodes in Javascript,

58
00:04:29,160 --> 00:04:35,520
you just set text with text content because you rarely want to add a text node next to existing element

59
00:04:35,540 --> 00:04:36,260
nodes,

60
00:04:36,510 --> 00:04:38,140
so therefore it is not really a use case,

61
00:04:38,640 --> 00:04:43,950
so instead here, you use append child and pass in this new li.

62
00:04:44,250 --> 00:04:47,820
If you do that, you'll see this bullet point here

63
00:04:47,820 --> 00:04:49,460
and of course no content next to it

64
00:04:50,130 --> 00:04:57,000
but since we have access to new li, we can now also set text content equal to item 4 for example and

65
00:04:56,990 --> 00:05:02,580
you'll see it up here on the left. Typically of course, you would first finish up configuring this and

66
00:05:02,580 --> 00:05:08,850
set the text content and anything else and then append it instead of first appending it and then completing

67
00:05:08,850 --> 00:05:14,970
it because you only want to append it once you are done configuring it and you can set the text content

68
00:05:15,000 --> 00:05:16,650
and the style prop and so on

69
00:05:16,770 --> 00:05:22,560
even if you haven't added the item to the DOM yet because it's already there in Javascript memory,

70
00:05:22,740 --> 00:05:23,700
you can work with it.

71
00:05:24,180 --> 00:05:29,760
So this is now how we can add it and the big advantage is now that we already have this object now where

72
00:05:29,760 --> 00:05:35,450
we can add event listeners or change the style or do whatever you want,

73
00:05:35,460 --> 00:05:37,480
that is all possible now

74
00:05:37,500 --> 00:05:39,330
thanks to this way of adding it.