We've got one more code improvement that we're going to be doing in this lesson, and did you know that
you can create elements in JavaScript?
Of course, it's not going to take over building out your HTML, but you can simplify this using some
JavaScript.
So we're going to clean this code up a bit.
We're going to get rid of this excess code.
We're going to keep the plant that we created in the last lesson.
And instead of adding in these event listeners, we're going to update some of this code and we're going
to simply attach elements, create elements and attach them to the body.
So show you how to do that.
So first of all, we need to have an array and within this array.
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
we have.
So we've got Lione in there, we've got a cougar in there, and we also have a Barch in there.
And I should have renamed that empathy to Dog would have made a little bit more sense.
But let's stick with what we have right now.
So we've got an array.
And what we want to do is we want to loop through the array, so first of all, I want to make sure
that the document has loaded.
And if you're familiar with query, you know, that query has a document ready object.
So this is a very similar to Domme content loaded.
And in JavaScript, if you want to ensure that your DOM content has loaded, then you can use the DOM
content loaded method and adding an event listener.
And then over here is the function that's going to get invoked.
So I'm going to create a function called in it and we'll just simply output for now within the console
page.
Ready.
So just to show you how this works, when we reload the page, we get page ready.
So this is the first part of where we're invoking our function.
And this means that the DOM has loaded the document object has loaded.
And for most of the time, when you've got your script underneath your elements, you should be good
to go.
But just in case, if you want to be double sure, make sure that your elements have loaded.
You can use Dom content loaded and use the that list, start to listen for that event loaded.
So once we've loaded the event we can loop through.
So we're not going to have all of these elements anymore.
We're going to actually create them dynamically.
So let's work through how we're going to do that and we can use loop for that.
And we've got an array with all of the element.
So we've got the class name that we want to use as well as the name we want inside of that element.
So we're going to use the array and using for each is going to allow us to loop through each one of
the items in the array.
We can use the short format or we can just use the regular function format.
So for now, we'll just loop through there and we'll console log out each item.
So going back and refreshing the page, we see that we got Lion, Cougar and bark.
So exactly what we need.
So this is essentially looping through all of our contents of our array and giving us a variable called
item, which we can now make use of as we're looping through.
So we no longer need to add event listeners to each one of these where we can add event listeners as
we're building them out.
So let's go ahead and we're going to create an element called d'Hiv as we're looping through and using
documents.
So this is how you create elements.
So we're creating an element.
So there's a method within JavaScript to create element easy enough and we specify what type of element
we want to create.
And once we create that element, we then have an option to append it to our to another element, or
in this case, we want to send it to the document body.
So we're doing documents body.
And we're doing append child and the child that we're spending is the object that we just created.
So let's refresh the page and we'll go into our inspect here, and you're going to see that within body.
We've created a bunch of elements just below the script tags, so it's coming in just below the script
tags here, we've got the script tags above.
So if we want to be really specific, we could select the document body and specify where we want to
spend that content and of course, we're spending it after script because we're we've got the script
afterwards.
So now what I'm going to do is I'm going to actually get rid of these ones.
And we're going to set some properties into that div so we know that we want it to set an attribute
and the attribute that we want to set, and we saw this earlier as well, that we can set a class and
within the class we want to set animal.
But we also had another value that we want it to set, and that's going to be the name of the item.
So let's refresh again.
So now we've got animal lion, animal cougar, animal bark.
So these are the freshly created elements that we have.
Next, what we want to do is we want to add some inner HTML so Divx and we're going to update that in
our text with whatever the value of item is.
So when we refresh, we've got lion cougar bark.
And just as we had to lower case, we can also do, too, and we can do it to uppercase.
If we want to go that way, we get the elements to the upper case and now in order to make them clickable,
we can add the event listener at this point.
So taking that div, we can take div add event listener and only one dot there.
So listening for the click and we don't actually need all of this information.
We can invoke the function and we already have that item name within that object, so we don't have
to actually pass it through.
We've already got it sitting there.
So let's try that out.
So now going into the console and that's a long and loud one, we see that we're able to activate all
of that functionality without having to go through all of this stuff that we went through earlier.
And we can also clean this up a bit.
So now we're creating these elements dynamically, all sitting from an array.
So make sure that these names do match.
Otherwise, it's not going to work.
Or if they don't match, then you need to set some conditions within your elements just to make sure
that things are working properly.
And this is another great way to shorten some of your code and really focus and zeroed in on the JavaScript
instead of the HTML and building out all of your content using JavaScript.
And as you can see, there's really no HTML sitting in here.
There's no elements that are being created, all the JavaScript.
So go ahead and give it a try, creating elements dynamically and then attaching attributes, updating
the inner text and then adding event listeners.
So this was another option in order to create some elements dynamically tried out for yourself.