- Adding jQuery to a Project 2:43
- Spoiler Revealer: Breaking it Down 6:28
- Understanding Unobtrusive JavaScript 4:38
- Adding New Elements to the DOM 5:06
- Progressive Enhancement and Unobtrusive JavaScript 5 questions
- Adding New Elements to the DOM 2 objectives
- Using on() for Event Handling 2:26
- Using Events with Dynamically Added Elements 4:41
- The Event Object 4:44
- Events with jQuery 2 objectives
- What is Traversal? 8:42
- DOM Traversal with jQuery 2 objectives
- jQuery Events and DOM Traversal Review 5 questions
Preview
Video Player
00:00
00:00
Adding New Elements to the DOM
5:06Learn how to create new HTML elements and insert them into the DOM.
Open the work space with this
video if you haven't already.
0:00
To add the button if JavaScript is
present, we need to know how to create
0:03
the button dynamically and
add it to the page with jQuery.
0:07
I'll create a space at the top of
the document and make some notes.
0:10
So we need to create
the Reveal Spoiler button,
0:15
and append to web page.
0:21
To create an element in jQuery,
all we need to
0:25
do is pass a string containing
valid HTML to the jQuery method.
0:28
JQuery then creates a new DOM element,
0:41
you can then call any jQuery
method on the element.
0:43
I'm going to save this new element
into a variable called button.
0:47
Notice I've used a $ in front of
my variable name, this is a common
0:55
convention when you create a variable
that contains a jQuery element.
0:59
The $ sign before the name
button isn't required, but
1:04
it's a great way to distinguish variables
that contain jQuery selected elements
1:08
from regular variables with
other types of values.
1:12
The element is created,
now we need to add it to the page.
1:16
When you create a new element with jQuery,
it's not automatically added to the DOM,
1:19
your users won't see it on
a page until you add it.
1:23
There's another jQuery method for that and
1:26
it's called append,
I'll show you how it works.
1:29
Let's look at the HTML and
1:32
figure out where we need to place
this new element we've created.
1:33
We want to put the button here
where the other button is,
1:36
yes, we can delete this button in our
HTML because we don't need it anymore.
1:41
We're going to use jQuery to create it and
append it dynamically.
1:45
The append method adds an element as
the last item within a parent element,
1:49
so the element we're adding
will be added to the end
1:55
of whatever the parent
element already contains.
1:57
That means that if we append to
the spoiler paragraph tag, it will put
2:01
the button right after this span tag,
which is exactly where we want it to go.
2:06
Go back to app.js, to append, we'll first
select the element we want to append to,
2:11
the element with the spoiler class.
2:16
Then we'll call the append method on it.
2:22
And to the append method,
we'll pass the element we want to append,
2:28
which is this button element
that we just created.
2:32
Now I'll save both files and preview.
2:37
And it works just like before, but
now our JavaScript is unobtrusive.
2:45
Since we're using JavaScript to create and
insert the button into the web page,
2:49
if JavaScript is disabled our users will
still be able to view the spoiler, but
2:54
won't see a button that doesn't work.
2:59
Let's open up Chrome Dev Tools and
disable the JavaScript just to check.
3:01
Great the text is visible but
the button isn't,
3:11
I'll re-enable JavaScript and
refresh again.
3:15
Here's a quick tip before we move on,
what if for
3:19
some reason I wanted to place the button
here before the spoiler text,
3:22
as the first element
nested within this p tag.
3:26
Let me quickly show you how you can Google
to find other helpful jQuery methods,
3:29
it's often as easy as googling the desired
behavior followed by the term jQuery.
3:34
We know that append adds something to the
end of an element, I'll go to Google and
3:40
search for, add
3:45
something to beginning of element jquery.
3:49
The first hit is a jQuery element called
prepend in the jQuery documentation.
3:56
We could go to the documentation and
look at examples, but in this case,
4:02
let's just plug in this method
in place of append, and
4:06
see if it does what we think it will do.
4:09
So we'll change this to prepend, And
4:12
we'll save, And refresh.
4:17
So let's inspect this element,
And it does.
4:27
We can see that the button has
been inserted at the beginning of
4:32
all of the contents of
the spoiler paragraph.
4:36
Let's change it back to append,
and look again.
4:38
Now you can see the button
has been placed at the end.
4:48
Just a few seconds of googling and we have
a new method of jQuery in our toolbox.
4:52
I would encourage you to Google often when
there's a specific task like this that you
4:57
would wish to accomplish, it's
an awesome way to find out about new and
5:01
useful features.
5:04