Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Learn 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
You need to sign up for Treehouse in order to download course files.
Sign up