1
00:00:00,480 --> 00:00:01,170
Welcome back.

2
00:00:01,170 --> 00:00:06,390
In this lesson, we're going to be creating elements dynamically that we're going to add to the element

3
00:00:06,420 --> 00:00:08,210
with the idea of mean.

4
00:00:08,220 --> 00:00:13,710
So adding them in, just as we've got the div with the world, the paragraph, the span, we're going

5
00:00:13,710 --> 00:00:15,360
to add them dynamically.

6
00:00:15,690 --> 00:00:21,180
So opening up our editor, let's create a list of the different elements that we want to use.

7
00:00:21,330 --> 00:00:27,150
And we can do the same thing as we've got our class array and we can call this element array.

8
00:00:27,600 --> 00:00:32,490
And these are going to be all of the different types of elements that we're going to allow the user

9
00:00:32,490 --> 00:00:32,980
to create.

10
00:00:33,000 --> 00:00:40,350
So we want them to create a div, a paragraph as well as a span and doing all of this dynamically.

11
00:00:40,740 --> 00:00:48,000
So we want to also add an option for the user to create those elements so we can add that to the top

12
00:00:48,000 --> 00:00:48,920
of the input.

13
00:00:48,930 --> 00:00:57,690
So doing add element, let's provide a dropdown, some other select with the name of add element.

14
00:00:59,080 --> 00:01:06,370
And we're going to populate it dynamically with JavaScript as we iterate through the array and then

15
00:01:06,370 --> 00:01:12,130
one more, we're going to add in a button and give the button the name Outr, and that will give us

16
00:01:12,130 --> 00:01:17,120
the option to add the element and this will add it into the main area.

17
00:01:17,740 --> 00:01:25,890
So let's make those selections within our JavaScript where we've got our select with ADD element and

18
00:01:25,930 --> 00:01:28,180
create an object for that.

19
00:01:29,420 --> 00:01:38,150
So consed add elements select the select that has a name of add element, so connecting that object

20
00:01:38,480 --> 00:01:44,210
and then the other new object that we have is another button with a name of Adir.

21
00:01:44,840 --> 00:01:54,230
So we can specify that within our selection process and we can just call it outer document query selector

22
00:01:54,470 --> 00:01:59,610
and specify the button with a name of atter and we'll make that selection.

23
00:01:59,810 --> 00:02:07,240
Next, let's make sure that we've got them available as objects and JavaScript so we clear that out.

24
00:02:07,250 --> 00:02:15,650
And let's first try atter so that selecting the button with the name of Atter as well as we're going

25
00:02:15,650 --> 00:02:20,390
to select the add element select object.

26
00:02:20,900 --> 00:02:22,690
So we've got both of them selected.

27
00:02:22,850 --> 00:02:29,280
So next thing that we want to do is populate that add element, select object.

28
00:02:29,870 --> 00:02:36,020
So going down to where we've got the DOM content loaded, this is where we can utilize that the same

29
00:02:36,020 --> 00:02:39,840
way that we populated the classes from the array.

30
00:02:40,100 --> 00:02:44,920
We can also populate that option from our element array as well.

31
00:02:45,170 --> 00:02:49,750
We can iterate through each one of those sort of select classes object.

32
00:02:49,760 --> 00:02:52,450
We're going to add it into the add element object.

33
00:02:52,460 --> 00:02:54,680
So shrink that down and refresh.

34
00:02:54,710 --> 00:02:58,440
So this is giving us an option to add any one of these elements.

35
00:02:58,460 --> 00:03:04,310
So coming up next, we're going to attach the event listener to the add button and add in that element

36
00:03:04,310 --> 00:03:08,850
dynamically into the class, into the element with the idea of mean.

37
00:03:08,900 --> 00:03:10,660
So that's still to come in the upcoming loss.

38
00:03:10,670 --> 00:03:16,580
So go ahead and add this into your project, adding in the list of elements for the user to be able

39
00:03:16,580 --> 00:03:17,120
to select.