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