This lesson, we need to attach an event listener to the add buttons whenever the add button gets clicked,
that we want to create the selected element and add it to the bottom of this element with the idea of
mean.
So going into our project, we've already set up and added the outer to the button with the button of
name atter.
So let's attach the event listener to atter.
And just as we've got event listener to button, we can attach an event listener to atter and the event
that we're listening for is a click.
And then when it gets clicked, what we want to do is create an element on the fly where he saw how
we can do this within the earlier lesson, where we've got an element that we're using, create element,
the document, create element method in order to create elements dynamically.
We also have the type of element that we want to create with.
And as we can see, this is a select it's got a value.
And when we reference that value right now, it's a div or whatever it changes to.
So for now, we can console, log out the element and output the value in the console whenever ad gets
clicked.
So try that.
And it's a div, it's a paragraph, it's a span.
And this is the same format that we need in order to create an element so we can do that and creating
an element on the fly, we can create using a variable called temp.
And the element that we're going to create is going to be referenced within this element value that
we're adding.
So that's all we need to do in order to add that.
And we can create that and we can append it to the current main element object.
So that's the object with the idea of main.
And let's also add that into an object.
So using document query selector with an idea of mean and using append child, we can append that newly
created element to the page.
Also, let's add in some text content into that element and as a default we can make it the same as
the add element.
And then lastly, the other thing that we need to do is we need to rebuild our dropdown list.
That newly created element is then selectable within the dropdown list.
So after we append it to mean we rebuild dropdown list.
So let's try that and refresh it.
So if we want to add a div into our main area, you can see that now the div has been added.
If I do an inspect on it, I can see the div has been created and let's also see if it was added into
our dropdown list.
And that means that we can also update the content.
We can make it bigger if we want.
We can update and add classes as needed and update the colors, the background colors, as well as the
background, the text colors if we want.
And all of this can now be updated dynamically as we make our selection of the element.
So go ahead and add this into your project.
And coming up next, we're going to add a click event to each one of the elements on the page and have
the ability to remove them by clicking on them.
So that's coming up next.