Welcome back.
In this lesson, we're going to be creating elements dynamically that we're going to add to the element
with the idea of mean.
So adding them in, just as we've got the div with the world, the paragraph, the span, we're going
to add them dynamically.
So opening up our editor, let's create a list of the different elements that we want to use.
And we can do the same thing as we've got our class array and we can call this element array.
And these are going to be all of the different types of elements that we're going to allow the user
to create.
So we want them to create a div, a paragraph as well as a span and doing all of this dynamically.
So we want to also add an option for the user to create those elements so we can add that to the top
of the input.
So doing add element, let's provide a dropdown, some other select with the name of add element.
And we're going to populate it dynamically with JavaScript as we iterate through the array and then
one more, we're going to add in a button and give the button the name Outr, and that will give us
the option to add the element and this will add it into the main area.
So let's make those selections within our JavaScript where we've got our select with ADD element and
create an object for that.
So consed add elements select the select that has a name of add element, so connecting that object
and then the other new object that we have is another button with a name of Adir.
So we can specify that within our selection process and we can just call it outer document query selector
and specify the button with a name of atter and we'll make that selection.
Next, let's make sure that we've got them available as objects and JavaScript so we clear that out.
And let's first try atter so that selecting the button with the name of Atter as well as we're going
to select the add element select object.
So we've got both of them selected.
So next thing that we want to do is populate that add element, select object.
So going down to where we've got the DOM content loaded, this is where we can utilize that the same
way that we populated the classes from the array.
We can also populate that option from our element array as well.
We can iterate through each one of those sort of select classes object.
We're going to add it into the add element object.
So shrink that down and refresh.
So this is giving us an option to add any one of these elements.
So coming up next, we're going to attach the event listener to the add button and add in that element
dynamically into the class, into the element with the idea of mean.
So that's still to come in the upcoming loss.
So go ahead and add this into your project, adding in the list of elements for the user to be able
to select.