1
00:00:02,510 --> 00:00:07,700
So we saw document create element which is really useful for creating DOM objects with which we then

2
00:00:07,700 --> 00:00:08,790
can interact

3
00:00:08,840 --> 00:00:11,480
and we did insert it with append child,

4
00:00:11,570 --> 00:00:14,230
nothing wrong with that but there also is append.

5
00:00:14,270 --> 00:00:20,450
The difference is not only that append is shorter but that append also does not only take our new li

6
00:00:20,480 --> 00:00:26,840
which we created but that here you can also add a string, some text for example which is then inserted

7
00:00:26,870 --> 00:00:29,510
as a text node next to the other element nodes,

8
00:00:29,540 --> 00:00:35,120
so if you want to insert a text node you can conveniently do it like this. Another difference by the

9
00:00:35,120 --> 00:00:41,450
way is that you can add multiple nodes here, simply separated by commas as multiple arguments to

10
00:00:41,450 --> 00:00:46,450
append to add multiple nodes at once in that place,

11
00:00:46,490 --> 00:00:49,220
that's also a difference to append child.

12
00:00:49,220 --> 00:00:55,130
Now it is worth mentioning that if you google for js append to find the MDN entry on that, that

13
00:00:55,130 --> 00:01:00,860
if you scroll down to the browser support table there, that Internet Explorer, no version of it supports

14
00:01:00,860 --> 00:01:03,990
append. Edge does and Safari and all other browsers

15
00:01:04,070 --> 00:01:09,520
but if you need to support older versions of Internet Explorer, you might prefer append child

16
00:01:09,560 --> 00:01:14,570
but that really depends on the user base you're targeting, if that's not an issue for you, then you can

17
00:01:14,570 --> 00:01:19,850
absolutely use append instead of append child, otherwise append child has been there for longer and is

18
00:01:19,850 --> 00:01:26,090
simply safer to be used. In the browser support module later down the course, you'll also learn how to

19
00:01:26,090 --> 00:01:31,570
make features like this work in older browsers, like Internet Explorer which would normally not support

20
00:01:31,570 --> 00:01:32,720
it.

21
00:01:32,720 --> 00:01:34,480
So that was append and append child,

22
00:01:34,490 --> 00:01:35,900
we also got more.

23
00:01:35,900 --> 00:01:44,160
So again let me get access here to our unordered list and let's create a new li, a new list item, however

24
00:01:44,240 --> 00:01:51,320
you want to call it with document create element as you learned, li is the tag name and now there,

25
00:01:51,320 --> 00:01:55,880
we can add a text content of item 4 since I reloaded this page,

26
00:01:55,880 --> 00:02:02,720
the old one which I added is gone and now we can of course append new li as you learned,

27
00:02:02,930 --> 00:02:06,240
but let's say we want to insert it as the first element,

28
00:02:06,290 --> 00:02:14,120
well then we can use prepend. So we can call prepend, new li, hit enter and now item 4 is actually

29
00:02:14,120 --> 00:02:15,350
the first element.

30
00:02:15,650 --> 00:02:23,060
Now just as before, searching for js or MDN prepend is helpful to get the official article and

31
00:02:23,060 --> 00:02:28,310
scroll down to the browser support table to learn that here again, Internet Explorer does not support

32
00:02:28,310 --> 00:02:28,620
this,

33
00:02:28,640 --> 00:02:35,060
so with the same thing as with append, this is not necessarily supported. Still, to show you a couple of other

34
00:02:35,060 --> 00:02:35,470
methods

35
00:02:35,510 --> 00:02:36,950
and one other interesting behaviour,

36
00:02:36,980 --> 00:02:40,470
let's say we decide we actually want to use it somewhere else,

37
00:02:40,550 --> 00:02:47,300
we want to add it before the currently last list item. Now we can get access to that with list and then

38
00:02:47,300 --> 00:02:48,720
last element child,

39
00:02:48,770 --> 00:02:49,150
right?

40
00:02:49,160 --> 00:02:52,890
That gives us access to the last list item in the list

41
00:02:53,030 --> 00:02:58,310
and now I want to add the new list item, item 4 which I already did add but I want to add it again let's

42
00:02:58,310 --> 00:03:07,490
say in front of item 3. Now for that, I can now call before here and I can pass a new li here or

43
00:03:07,490 --> 00:03:11,810
as many nodes as I want to insert before the selected last element child,

44
00:03:11,810 --> 00:03:16,430
so item 3 in this case. If I hit enter, item four is added there

45
00:03:16,460 --> 00:03:23,840
but the interesting thing we see here is that item 4 is now actually removed from the beginning of the

46
00:03:23,840 --> 00:03:27,970
list and basically moved into this place.

47
00:03:28,400 --> 00:03:34,910
If you have an element selected, either because you selected it in the DOM with query selector or

48
00:03:34,910 --> 00:03:40,370
because you created it with create element and that element is already part of the DOM,

49
00:03:40,370 --> 00:03:44,090
so it is already rendered, if you then insert it somewhere else,

50
00:03:44,090 --> 00:03:46,200
this is not copied or anything like that,

51
00:03:46,220 --> 00:03:52,760
instead the existing element is detached from the place where it was and moved to the new place and

52
00:03:52,760 --> 00:03:58,190
I guess this actually makes a lot of sense since objects are reference values as you learned and the

53
00:03:58,190 --> 00:04:04,520
DOM objects you're working here are nothing but normal objects in the end and therefore if we do something

54
00:04:04,520 --> 00:04:10,580
with it and we add it somewhere else, we always work with the same object, so of course it's detached from

55
00:04:10,580 --> 00:04:16,400
the existing place and moved to the new one, it's just something to be aware of. If you want a brand new

56
00:04:16,400 --> 00:04:24,470
one, you have to create a brand new one with document create element. Now and of course, you don't just

57
00:04:24,470 --> 00:04:33,230
have before, you also have after to insert it after this selected element unsurprisingly and you also

58
00:04:33,270 --> 00:04:34,710
have replace with,

59
00:04:34,710 --> 00:04:41,240
so if I select let's say in this case the first element child and then I use replace with and replace

60
00:04:41,240 --> 00:04:43,310
this with new li,

61
00:04:43,810 --> 00:04:50,000
then you see item 1 is now dropped actually because replace does not swap it, it just replaces the

62
00:04:50,020 --> 00:04:54,630
element with it, which means it gets rid of the old one and replaces it with a new one and therefore

63
00:04:54,640 --> 00:04:57,310
the old item one is replaced with item four.

64
00:04:57,880 --> 00:05:03,810
So these are different ways of inserting this in different places, important - append, before, after and

65
00:05:03,810 --> 00:05:11,230
so on, they all take multiple nodes if you want, so you can absolutely say append new li and some other

66
00:05:11,620 --> 00:05:13,080
item which you might have created.

67
00:05:13,210 --> 00:05:19,600
They also take strings, so text nodes if you want to but most of the time, you'll use them with single

68
00:05:19,600 --> 00:05:24,790
elements and then they simply give you a lot of flexibility and control over where this element should

69
00:05:24,790 --> 00:05:25,960
be inserted,

70
00:05:25,960 --> 00:05:31,300
just keep in mind that inserting the same element multiple times will move it because we're working

71
00:05:31,300 --> 00:05:36,440
with objects here and not with some automatically copied things.

72
00:05:36,550 --> 00:05:39,120
Now one word about before and after,

73
00:05:39,310 --> 00:05:45,910
if you search for it on MDN and you again check the browser support table, you'll see that here we actually

74
00:05:45,910 --> 00:05:48,120
also have a problem with Safari.

75
00:05:48,190 --> 00:05:55,360
So whereas append and prepend work on Safari and only don't work on Internet Explorer, before and after

76
00:05:55,420 --> 00:05:57,190
also have problems on Safari,

77
00:05:57,490 --> 00:06:04,840
so there you want to be even more careful for whether you want to use that or not and maybe find different

78
00:06:04,840 --> 00:06:08,650
ways of inserting elements than with before and after.

79
00:06:08,680 --> 00:06:15,160
Now what would be such a different way of inserting an element in a specific position if you want to insert

80
00:06:15,160 --> 00:06:21,970
an element let's say after item 2 which you can't really do with append child or so on or anything like

81
00:06:21,970 --> 00:06:22,840
that.

82
00:06:22,990 --> 00:06:29,440
Well for that, you might want to select the element you're interested in, in this case my second list item,

83
00:06:29,890 --> 00:06:33,070
that could be found on children and then index 1,

84
00:06:33,120 --> 00:06:33,430
right,

85
00:06:33,430 --> 00:06:35,980
that gives me the second item,

86
00:06:35,980 --> 00:06:42,520
so second li is now stored in there and now if I create a new list item and I reloaded this page so

87
00:06:42,520 --> 00:06:48,750
that I can create that all again from scratch and I create a new list item here and I set new li

88
00:06:48,810 --> 00:06:58,180
text content to item 4 and I want to insert this after this second li, well then of course the most

89
00:06:58,180 --> 00:07:01,540
convenient way would be to use second li after

90
00:07:01,570 --> 00:07:04,920
but again, support for that on Safari is not that great.

91
00:07:05,230 --> 00:07:14,430
So if we want to avoid it, then you have another useful method, list.insertAdjacentElement.

92
00:07:14,770 --> 00:07:21,240
If we have a look at this on MDN, then we see, just like insert adjacent HTML,

93
00:07:21,250 --> 00:07:22,600
these are the strings we can use

94
00:07:26,630 --> 00:07:28,510
and browser support is way better.

95
00:07:29,650 --> 00:07:34,450
So now here, we could insert this inside of the list or since we want to insert it next to the second

96
00:07:34,450 --> 00:07:43,300
li, we can just go to that and call insert adjacent element where is after end, if we want to insert

97
00:07:43,300 --> 00:07:49,660
it after this one because as you can see here in MDN, after end inserts element after the element

98
00:07:49,690 --> 00:07:55,750
you selected, so after the second li and then here, it's the new li which we want to insert and now

99
00:07:55,870 --> 00:08:02,380
item 4 is inserted after that second element. So insert adjacent element, whilst being a bit longer than

100
00:08:02,440 --> 00:08:09,070
after and before is the safer way of doing this, of inserting elements after or before other elements since

101
00:08:09,070 --> 00:08:13,150
it has better browser support. So that's also something you should be aware of.