Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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. In this video, you'll create a new element with document.createElement().
So far we've made several changes to
the elements on our page with JavaScript.
0:00
Now it's time to take it to the next
level and create new elements.
0:05
You can create a new element in JavaScript
with document.createElement and
0:08
passing in the name of the HTML
element you wanna create as a string.
0:13
In this example we're creating a div.
0:17
So let's change our app to allow users
to create new items for the list.
0:19
First we will need to add a new text input
and a button here in index dot HTML.
0:24
In fact let's just copy the input and
the button we wrote earlier and
0:29
paste it right below the unordered list.
0:34
And we'll need to change the classes and
text content.
0:37
So the inputs class will be add item input and
0:40
the buttons class will be addItemButton
0:45
And we will write add item for
the buttons text.
0:54
I'll save my index.html file and over in
app.js let's select our two new elements.
1:00
So as there variable names I'll
simply use their class names.
1:07
So first const addItemInput =
1:11
document.querySelector and
1:17
I'll query the selector
input.addItemInput.
1:23
Go ahead and copy this constant,
paste one right below and
1:32
I'll change this one to addItemButton =
1:38
document.querySelectorButton.addItemBut-
ton.
1:42
And now we can add a click event listener
to addItemButton as we've done before.
1:52
So at the bottom of the file we will
1:59
addItemButton.addEventListener pass and
2:03
click and function.
2:10
And inside the function, we'll create
a new list element with create element and
2:21
assign it to the variable li.
2:27
So we will type let li =
document.createElement li
2:29
Once the element is created we can set
2:42
the text we wanted to
contain with text content.
2:44
So we wanted to take the value
from the text input so
2:48
I'll type li.textContent =
2:53
addItemInput.value.
2:57
Finally let's do a little cleanup here.
3:02
Noticed that we have several
buttons on the page now, but
3:05
we still have a variable named button.
3:09
So let's update this variable name to make
our code more readable and meaningful.
3:12
So I'm going to change this button
constant to description button.
3:17
And while we're at it we may as well
change the input and p constants too.
3:26
So I'll change the input constant
to a descriptionInput and
3:31
the p constant to description p.
3:36
So now in my function
here all change button to
3:40
descriptionButton.addEventListener and
3:44
I'll change p to description
p.innerHTML and
3:49
finally change input to
descriptionInput.value.
3:53
All right, great so now when we come back
to this code in a month or in a year,
4:02
it will be much easier to figure
out what this code is doing.
4:06
Naming variables well is really
worth putting some thought into.
4:10
All right, so I'll save my file and now if
we go back to the browser, and refresh.
4:13
I'll go ahead and enter some text in
the bottom field here and click add item.
4:19
And nothing happens yet.
4:24
Well that's because even though
we've created the element
4:26
we haven't added it to the DOM yet.
4:30
Right now we're just creating
free floating elements that exist
4:32
only in memory somewhere.
4:35
So in the next video you'll learn
how to insert content into the DOM.
4:37
You need to sign up for Treehouse in order to download course files.
Sign up