Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed JavaScript and the DOM!
You have completed JavaScript and the DOM!
Preview
In this video, you'll begin learning how to create new elements and add them to the page. First, you'll create a new element with document.createElement().
Further Reading
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
So far, we've only read values and changed
the elements on our page with JavaScript.
0:00
Now you're going to begin learning
how to create new elements and
0:05
add them to the page.
0:08
For instance, in a todo list application,
0:10
a user needs a way to add
a todo item to the list.
0:13
This action requires that we provide
a way to add a node to the DOM,
0:17
like the node representing a list item.
0:20
There are various ways you might add
elements to the DOM with JavaScript.
0:23
For example, you learned that setting
an element's innerHTML property to
0:28
a string containing HTML tags, sets
the markup to display within the element.
0:33
But that property replaces all the
existing contents of the element with just
0:38
the new content.
0:42
What if you need to preserve
the original markup?
0:44
It's common to append or
0:47
add newly created elements alongside
existing sibling elements.
0:48
For example, a simple to do list might be
an unordered list containing list items,
0:53
displaying each todo.
1:00
As you enter new todos,
new list items get created and
1:01
added to the beginning or end of the list.
1:06
First, I'll teach you how to create a new
element with document.createElement.
1:09
Then later you'll learn how to insert
a newly created element into the DOM.
1:15
Back in our project,
1:20
let's add a feature that allows users to
add new items to the daily task list.
1:21
We'll update our code to let users type
a new task into this text input then click
1:27
the button to create the new task and
make it appear in the list.
1:32
In the index.html file,
1:35
let's start by changing the header
button's text to add task.
1:38
I'll save my file and
over in app.js, I'm also going to
1:46
update the button update
variable name to btnCreate.
1:51
A more meaningful name indicating
that the purpose of the button
1:56
assigned to this variable
is to create an element.
2:00
Next I need to update my event
listener with the new variable name.
2:04
And now I'm going to delete the headline
variable from this function and
2:10
the two lines of code that reference it,
2:13
because we're no longer going
to be updating the headline.
2:15
That was just a simple demo to help
introduce the concept of DOM manipulation.
2:19
Now we're gonna take things up a notch.
2:24
Again, you can access and
2:26
review all the code written in this
course by downloading the project files.
2:27
Within this function,
2:32
we'll create a new list item element
with the createElement method.
2:34
First, I'll declare a variable named item.
2:39
Then assign it the newly
created element with
2:42
document.createElement followed
by a set of parentheses.
2:46
To create a new element,
pass document.createElement
2:51
the tag name of the HTML element you want to
create as a string, in this case, li.
2:55
I'll quickly demonstrate how this method
works by copying this declaration and
3:02
pasting it here in the browser console.
3:08
Then on the next line type item, and
we see that it returns a set of li tags.
3:11
Once the element gets created,
3:17
we can set the text inside it
with the textContent property.
3:19
The list item's text content should be
the value entered into the text input.
3:23
So back in our function,
3:31
let's assign item.textContent
3:33
the value of the text
field with input.value.
3:36
I'll save my file. Then back in the browser, refresh and
3:44
enter some text, and
click "Add task". Nothing happens.
3:50
That's because even though
we've created the element,
3:56
we haven't added it to the DOM yet.
4:00
Right now we're creating free-floating
elements that exist only in memory
4:02
somewhere.
4:05
For example here in the event listener,
4:09
I'll log the value of the item
variable to the console.
4:13
I'll once again, enter some text into
the field and click the button.
4:18
This time the console outputs the newly
created list item with the text
4:25
"Read a book".
4:29
Up next, you'll learn how to
insert this content into the DOM.
4:31
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up