Open the work space with this video if you haven't already.

To add the button if JavaScript is present, we need to know how to create

the button dynamically and add it to the page with jQuery.

I'll create a space at the top of the document and make some notes.

So we need to create the Reveal Spoiler button,

and append to web page.

To create an element in jQuery, all we need to

do is pass a string containing valid HTML to the jQuery method.

JQuery then creates a new DOM element,

you can then call any jQuery method on the element.

I'm going to save this new element into a variable called button.

Notice I've used a $ in front of my variable name, this is a common

convention when you create a variable that contains a jQuery element.

The $ sign before the name button isn't required, but

it's a great way to distinguish variables that contain jQuery selected elements

from regular variables with other types of values.

The element is created, now we need to add it to the page.

When you create a new element with jQuery, it's not automatically added to the DOM,

your users won't see it on a page until you add it.

There's another jQuery method for that and

it's called append, I'll show you how it works.

Let's look at the HTML and

figure out where we need to place this new element we've created.

We want to put the button here where the other button is,

yes, we can delete this button in our HTML because we don't need it anymore.

We're going to use jQuery to create it and append it dynamically.

The append method adds an element as the last item within a parent element,

so the element we're adding will be added to the end

of whatever the parent element already contains.

That means that if we append to the spoiler paragraph tag, it will put

the button right after this span tag, which is exactly where we want it to go.

Go back to app.js, to append, we'll first select the element we want to append to,

the element with the spoiler class.

Then we'll call the append method on it.

And to the append method, we'll pass the element we want to append,

which is this button element that we just created.

Now I'll save both files and preview.

And it works just like before, but now our JavaScript is unobtrusive.

Since we're using JavaScript to create and insert the button into the web page,

if JavaScript is disabled our users will still be able to view the spoiler, but

won't see a button that doesn't work.

Let's open up Chrome Dev Tools and disable the JavaScript just to check.

Great the text is visible but the button isn't,

I'll re-enable JavaScript and refresh again.

Here's a quick tip before we move on, what if for

some reason I wanted to place the button here before the spoiler text,

as the first element nested within this p tag.

Let me quickly show you how you can Google to find other helpful jQuery methods,

it's often as easy as googling the desired behavior followed by the term jQuery.

We know that append adds something to the end of an element, I'll go to Google and

search for, add

something to beginning of element jquery.

The first hit is a jQuery element called prepend in the jQuery documentation.

We could go to the documentation and look at examples, but in this case,

let's just plug in this method in place of append, and

see if it does what we think it will do.

So we'll change this to prepend, And

we'll save, And refresh.

So let's inspect this element, And it does.

We can see that the button has been inserted at the beginning of

all of the contents of the spoiler paragraph.

Let's change it back to append, and look again.

Now you can see the button has been placed at the end.

Just a few seconds of googling and we have a new method of jQuery in our toolbox.

I would encourage you to Google often when there's a specific task like this that you

would wish to accomplish, it's an awesome way to find out about new and

useful features.