- 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
Append Nodes
4:52You learned how to create elements with JavaScript, but the newly created elements won't appear on the page until you add them to the DOM. Use the append() method to insert a new node inside a parent node.
Earlier you learned how to create
elements with JavaScript, but
0:00
the newly created elements won't appear on
the page until you add them to the DOM.
0:04
Remember earlier when we talked about
the DOM being a tree-like structure with
0:09
nodes? That tree is what we'll use to
place our new element or DOM node.
0:14
We'll do that by specifying an existing
parent node like a UL and then using
0:19
the append() method to append or
add a new child node inside it like an LI.
0:24
If you're still not quite sure about the
difference between an element and a node,
0:31
you can think of them as being mostly interchangeable,
0:35
which is how I've referred
to them in this course.
0:37
Nodes are all the different
components that make up the DOM.
0:41
A node can be any object in the DOM tree,
not just an HTML element.
0:45
For example, a text within HTML
tags is considered as a node.
0:49
An element is a specific type of node that
is directly specified in the document with
0:55
an HTML tag and has properties like an ID,
or a class, and can have child elements.
1:01
Let's determine where we want to append
the list item we created earlier.
1:08
In index.html, all the list items
are nested inside this ul element.
1:14
So the ul is the parent element,
and the li's are the children.
1:20
So if we select the ul and
append a child li to it,
1:26
the li will appear as the last item –
after "Playing my guitar" in this case.
1:30
Let's switch over to app.js and
append the list item.
1:36
The first step is to select or
reference the parent element,
1:39
which in our case is the ul.
1:44
Inside this event listener function,
let's declare a variable named list and
1:46
assign it the ul element
with document.querySelector.
1:51
After we've created the new list item,
2:02
we can append it to the list
using the append method.
2:06
Type list.append
followed by a set of parentheses.
2:10
You pass append the node or set of nodes
to append to the given parent node.
2:16
I'll pass it the newly created list
item assigned to the item variable.
2:21
Let's save this,
switch to the browser and refresh.
2:27
I'll type "Write a blog post",
and click the button.
2:34
And good, it works.
2:41
I've created a new list item element and
added it to the DOM.
2:42
Add another item, say "Go for a walk", and
see it added to the end of the list.
2:47
The append method will always
add the new node to the end or
3:00
after the last child of
the specified element.
3:04
To add each new list item to the beginning
of the list as the first child,
3:08
you can use the prepend() method.
3:13
I'll type a task into the text field,
3:24
Click the button, and now the new
task appears at the top of the list.
3:30
Be sure to check the teacher's notes with
this video to learn more about browser
3:35
support for the append and prepend methods
and alternative DOM insertion methods.
3:40
Finally, it's important to alert
screen readers anytime elements
3:51
are dynamically updated and added to
the DOM, like items in an unordered list.
3:55
Notice the aria-live
attribute added to the ul.
4:00
The aria-live attribute lets screen
readers know that content in a particular
4:04
element will change dynamically, and
that it should pay attention to it and
4:09
announce those changes to the user.
4:13
Setting the value to polite means that the
announcement will occur when the screen
4:16
reader has finished the current task or
announcement versus interrupting it.
4:20
In addition,
4:25
it's important to test the accessibility
of content added to the DOM, especially
4:25
on larger projects where updates
are frequently being made to the page.
4:30
In the teacher's notes,
4:35
I've posted more information about tools
you can use to test your projects to help
4:36
identify and resolve common accessibility
issues involving dynamic content.
4:41
Next, I'll teach you one
more convenient method for
4:46
inserting HTML and
its contents into the DOM.
4:49