- Get and Set Content with textContent and innerHTML 8:00
- Change Element Attributes 5:50
- Modifying Elements 2 objectives
- Set Inline Styles with the style Property 9:38
- Create New DOM Elements 4:35
- Review Attributes and Element Creation 5 questions
- Append Nodes 4:52
- DOM Manipulation Review 3 questions
- Insert HTML at Specified Positions 3:39
- Remove Nodes 4:20
- Review Appending and Removing Nodes 5 questions
Preview
Video Player
00:00
00:00
Create New DOM Elements
4:35In 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().
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