So far we've made several changes to the elements on our page with JavaScript.

Now it's time to take it to the next level and create new elements.

You can create a new element in JavaScript with document.createElement and

passing in the name of the HTML element you wanna create as a string.

In this example we're creating a div.

So let's change our app to allow users to create new items for the list.

First we will need to add a new text input and a button here in index dot HTML.

In fact let's just copy the input and the button we wrote earlier and

paste it right below the unordered list.

And we'll need to change the classes and text content.

So the inputs class will be add item input and

the buttons class will be addItemButton

And we will write add item for the buttons text.

I'll save my index.html file and over in app.js let's select our two new elements.

So as there variable names I'll simply use their class names.

So first const addItemInput =

document.querySelector and

I'll query the selector input.addItemInput.

Go ahead and copy this constant, paste one right below and

I'll change this one to addItemButton =

document.querySelectorButton.addItemBut- ton.

And now we can add a click event listener to addItemButton as we've done before.

So at the bottom of the file we will

addItemButton.addEventListener pass and

click and function.

And inside the function, we'll create a new list element with create element and

assign it to the variable li.

So we will type let li = document.createElement li

Once the element is created we can set

the text we wanted to contain with text content.

So we wanted to take the value from the text input so

I'll type li.textContent =

addItemInput.value.

Finally let's do a little cleanup here.

Noticed that we have several buttons on the page now, but

we still have a variable named button.

So let's update this variable name to make our code more readable and meaningful.

So I'm going to change this button constant to description button.

And while we're at it we may as well change the input and p constants too.

So I'll change the input constant to a descriptionInput and

the p constant to description p.

So now in my function here all change button to

descriptionButton.addEventListener and

I'll change p to description p.innerHTML and

finally change input to descriptionInput.value.

All right, great so now when we come back to this code in a month or in a year,

it will be much easier to figure out what this code is doing.

Naming variables well is really worth putting some thought into.

All right, so I'll save my file and now if we go back to the browser, and refresh.

I'll go ahead and enter some text in the bottom field here and click add item.

And nothing happens yet.

Well that's because even though we've created the element

we haven't added it to the DOM yet.

Right now we're just creating free floating elements that exist

only in memory somewhere.

So in the next video you'll learn how to insert content into the DOM.