1
00:00:00,330 --> 00:00:05,400
We've got one more code improvement that we're going to be doing in this lesson, and did you know that

2
00:00:05,400 --> 00:00:07,470
you can create elements in JavaScript?

3
00:00:07,650 --> 00:00:14,610
Of course, it's not going to take over building out your HTML, but you can simplify this using some

4
00:00:14,610 --> 00:00:15,390
JavaScript.

5
00:00:15,660 --> 00:00:17,720
So we're going to clean this code up a bit.

6
00:00:18,090 --> 00:00:20,010
We're going to get rid of this excess code.

7
00:00:20,010 --> 00:00:22,530
We're going to keep the plant that we created in the last lesson.

8
00:00:22,890 --> 00:00:28,260
And instead of adding in these event listeners, we're going to update some of this code and we're going

9
00:00:28,260 --> 00:00:32,670
to simply attach elements, create elements and attach them to the body.

10
00:00:32,820 --> 00:00:33,790
So show you how to do that.

11
00:00:34,710 --> 00:00:38,310
So first of all, we need to have an array and within this array.

12
00:00:38,670 --> 00:00:45,810
So we'll just call it we can call it my array and it'll be our array of all of the animal names that

13
00:00:45,810 --> 00:00:46,120
we have.

14
00:00:46,140 --> 00:00:54,180
So we've got Lione in there, we've got a cougar in there, and we also have a Barch in there.

15
00:00:54,330 --> 00:00:58,290
And I should have renamed that empathy to Dog would have made a little bit more sense.

16
00:00:58,500 --> 00:01:00,570
But let's stick with what we have right now.

17
00:01:01,020 --> 00:01:02,190
So we've got an array.

18
00:01:03,070 --> 00:01:08,770
And what we want to do is we want to loop through the array, so first of all, I want to make sure

19
00:01:08,770 --> 00:01:11,530
that the document has loaded.

20
00:01:11,950 --> 00:01:17,730
And if you're familiar with query, you know, that query has a document ready object.

21
00:01:17,980 --> 00:01:21,550
So this is a very similar to Domme content loaded.

22
00:01:21,940 --> 00:01:29,200
And in JavaScript, if you want to ensure that your DOM content has loaded, then you can use the DOM

23
00:01:29,200 --> 00:01:32,620
content loaded method and adding an event listener.

24
00:01:32,830 --> 00:01:36,240
And then over here is the function that's going to get invoked.

25
00:01:37,090 --> 00:01:45,190
So I'm going to create a function called in it and we'll just simply output for now within the console

26
00:01:45,190 --> 00:01:45,760
page.

27
00:01:45,760 --> 00:01:46,210
Ready.

28
00:01:46,920 --> 00:01:50,920
So just to show you how this works, when we reload the page, we get page ready.

29
00:01:51,190 --> 00:01:55,870
So this is the first part of where we're invoking our function.

30
00:01:56,020 --> 00:02:00,070
And this means that the DOM has loaded the document object has loaded.

31
00:02:00,250 --> 00:02:04,630
And for most of the time, when you've got your script underneath your elements, you should be good

32
00:02:04,630 --> 00:02:05,040
to go.

33
00:02:05,200 --> 00:02:09,610
But just in case, if you want to be double sure, make sure that your elements have loaded.

34
00:02:09,730 --> 00:02:15,440
You can use Dom content loaded and use the that list, start to listen for that event loaded.

35
00:02:15,700 --> 00:02:19,560
So once we've loaded the event we can loop through.

36
00:02:19,720 --> 00:02:21,960
So we're not going to have all of these elements anymore.

37
00:02:21,970 --> 00:02:23,920
We're going to actually create them dynamically.

38
00:02:24,310 --> 00:02:29,620
So let's work through how we're going to do that and we can use loop for that.

39
00:02:29,920 --> 00:02:32,560
And we've got an array with all of the element.

40
00:02:33,250 --> 00:02:39,700
So we've got the class name that we want to use as well as the name we want inside of that element.

41
00:02:40,000 --> 00:02:47,770
So we're going to use the array and using for each is going to allow us to loop through each one of

42
00:02:47,800 --> 00:02:49,140
the items in the array.

43
00:02:49,690 --> 00:02:53,710
We can use the short format or we can just use the regular function format.

44
00:02:56,630 --> 00:03:01,970
So for now, we'll just loop through there and we'll console log out each item.

45
00:03:04,720 --> 00:03:10,730
So going back and refreshing the page, we see that we got Lion, Cougar and bark.

46
00:03:10,930 --> 00:03:12,070
So exactly what we need.

47
00:03:12,220 --> 00:03:18,790
So this is essentially looping through all of our contents of our array and giving us a variable called

48
00:03:18,790 --> 00:03:22,900
item, which we can now make use of as we're looping through.

49
00:03:23,200 --> 00:03:28,810
So we no longer need to add event listeners to each one of these where we can add event listeners as

50
00:03:28,810 --> 00:03:29,980
we're building them out.

51
00:03:30,580 --> 00:03:37,300
So let's go ahead and we're going to create an element called d'Hiv as we're looping through and using

52
00:03:37,300 --> 00:03:37,830
documents.

53
00:03:37,840 --> 00:03:39,360
So this is how you create elements.

54
00:03:39,730 --> 00:03:41,410
So we're creating an element.

55
00:03:41,420 --> 00:03:47,950
So there's a method within JavaScript to create element easy enough and we specify what type of element

56
00:03:47,950 --> 00:03:49,170
we want to create.

57
00:03:49,540 --> 00:03:58,510
And once we create that element, we then have an option to append it to our to another element, or

58
00:03:58,510 --> 00:04:01,840
in this case, we want to send it to the document body.

59
00:04:03,510 --> 00:04:05,700
So we're doing documents body.

60
00:04:07,530 --> 00:04:14,730
And we're doing append child and the child that we're spending is the object that we just created.

61
00:04:16,240 --> 00:04:24,310
So let's refresh the page and we'll go into our inspect here, and you're going to see that within body.

62
00:04:25,270 --> 00:04:30,670
We've created a bunch of elements just below the script tags, so it's coming in just below the script

63
00:04:30,670 --> 00:04:33,160
tags here, we've got the script tags above.

64
00:04:34,850 --> 00:04:41,960
So if we want to be really specific, we could select the document body and specify where we want to

65
00:04:41,960 --> 00:04:50,030
spend that content and of course, we're spending it after script because we're we've got the script

66
00:04:50,030 --> 00:04:50,730
afterwards.

67
00:04:51,020 --> 00:04:54,590
So now what I'm going to do is I'm going to actually get rid of these ones.

68
00:04:56,680 --> 00:05:03,760
And we're going to set some properties into that div so we know that we want it to set an attribute

69
00:05:04,030 --> 00:05:09,790
and the attribute that we want to set, and we saw this earlier as well, that we can set a class and

70
00:05:09,790 --> 00:05:12,330
within the class we want to set animal.

71
00:05:12,610 --> 00:05:18,060
But we also had another value that we want it to set, and that's going to be the name of the item.

72
00:05:18,880 --> 00:05:20,620
So let's refresh again.

73
00:05:20,890 --> 00:05:25,060
So now we've got animal lion, animal cougar, animal bark.

74
00:05:25,060 --> 00:05:27,970
So these are the freshly created elements that we have.

75
00:05:29,160 --> 00:05:37,470
Next, what we want to do is we want to add some inner HTML so Divx and we're going to update that in

76
00:05:37,470 --> 00:05:41,640
our text with whatever the value of item is.

77
00:05:41,820 --> 00:05:45,000
So when we refresh, we've got lion cougar bark.

78
00:05:46,320 --> 00:05:53,850
And just as we had to lower case, we can also do, too, and we can do it to uppercase.

79
00:05:54,910 --> 00:06:01,540
If we want to go that way, we get the elements to the upper case and now in order to make them clickable,

80
00:06:01,750 --> 00:06:04,260
we can add the event listener at this point.

81
00:06:04,750 --> 00:06:11,410
So taking that div, we can take div add event listener and only one dot there.

82
00:06:11,650 --> 00:06:16,450
So listening for the click and we don't actually need all of this information.

83
00:06:17,080 --> 00:06:23,140
We can invoke the function and we already have that item name within that object, so we don't have

84
00:06:23,140 --> 00:06:24,430
to actually pass it through.

85
00:06:24,520 --> 00:06:26,140
We've already got it sitting there.

86
00:06:26,350 --> 00:06:27,250
So let's try that out.

87
00:06:29,470 --> 00:06:39,220
So now going into the console and that's a long and loud one, we see that we're able to activate all

88
00:06:39,220 --> 00:06:44,620
of that functionality without having to go through all of this stuff that we went through earlier.

89
00:06:44,890 --> 00:06:46,910
And we can also clean this up a bit.

90
00:06:47,410 --> 00:06:52,650
So now we're creating these elements dynamically, all sitting from an array.

91
00:06:52,750 --> 00:06:55,070
So make sure that these names do match.

92
00:06:55,090 --> 00:06:56,440
Otherwise, it's not going to work.

93
00:06:57,100 --> 00:07:02,950
Or if they don't match, then you need to set some conditions within your elements just to make sure

94
00:07:02,950 --> 00:07:04,830
that things are working properly.

95
00:07:05,170 --> 00:07:11,650
And this is another great way to shorten some of your code and really focus and zeroed in on the JavaScript

96
00:07:11,770 --> 00:07:16,620
instead of the HTML and building out all of your content using JavaScript.

97
00:07:16,840 --> 00:07:20,230
And as you can see, there's really no HTML sitting in here.

98
00:07:20,230 --> 00:07:23,540
There's no elements that are being created, all the JavaScript.

99
00:07:23,800 --> 00:07:30,370
So go ahead and give it a try, creating elements dynamically and then attaching attributes, updating

100
00:07:30,370 --> 00:07:32,980
the inner text and then adding event listeners.

101
00:07:33,220 --> 00:07:38,770
So this was another option in order to create some elements dynamically tried out for yourself.