- 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
Insert HTML at Specified Positions
3:39Use the InsertAdjacentHTML method to insert elements into the DOM. This method provides more control over inserting HTML inside a parent. You pass it the HTML and text content to create as a string, and then that string gets parsed and inserted into the DOM at the position you specify.
There are various ways to create
elements and insert them into the DOM.
0:00
Earlier, you used createElement
to create a new list item.
0:05
You set its content using
the textContent property.
0:10
Then added it to the daily task list
using the append and prepend methods.
0:13
Now, you're going to learn how to use
the insertAdjacentHTML method to insert
0:19
elements into the DOM.
0:24
This method provides more control
over inserting HTML inside a parent.
0:26
You pass it the HTML and
text content to create as a string, and
0:31
then that string gets parsed and inserted
into the DOM at the position you specify.
0:35
Let's see what this looks like
when creating our task list items.
0:40
First, in my btnCreate
addEventListener function,
0:44
I'll delete the lines of code
where I used createElement,
0:49
item.textContent, and
the append and prepend methods.
0:53
Remember, you can always review this code
in the project files with this course.
0:58
We want to create and add list
item elements to the task list,
1:03
which is the ul assigned
to the list variable.
1:07
So let's call the insertAdjacentHTML
method on the list variable.
1:12
I'll create a little extra space between
the parentheses, because we're going to be
1:20
passing the method some information
about what we want to insert.
1:24
This method accepts two arguments,
a position argument
1:28
instructing where inside this element
you want to insert the HTML and
1:32
the actual HTML string you want
to insert into the element.
1:37
You can use one of four options for
the position argument.
1:41
Each lets you insert the HTML in a
different location relative to the parent
1:45
element.
1:48
For example, before or
after the parent, or
1:50
just before or
after its first or last child.
1:54
You can review each position
argument in the teacher's notes.
2:00
I'm going to pass it
the string 'afterbegin',
2:04
which inserts the content inside
the element just before its first child.
2:08
In our case, it will appear
at the top of the task list.
2:14
And what do we want to insert?
2:19
A new list item.
2:21
So as the second argument,
2:23
I'll use a template literal
to build the new list item.
2:25
Inside the back ticks,
add opening and closing li tags.
2:28
Then I'll use string interpolation with
dollar sign curly braces to dynamically
2:34
insert the value of the text input field
inside the list item with input.value.
2:40
To recap, insertAdjacentHTML will
parse this template string as HTML.
2:47
Then insert the list item into the DOM
tree as the first child of the list.
2:54
Let's save this file, refresh the browser,
and type a task into the text field.
3:00
Click Add task, and
it works just as expected, good.
3:09
insertAdjacentHTML, in many cases,
is faster and
3:14
more efficient than
other insertion methods.
3:18
You can build a new element,
set its text content, and
3:21
then insert it into the DOM
all with one method.
3:25
Next, I'll teach you how to
remove an element from the DOM.
3:30