1
00:00:00,280 --> 00:00:03,250
Open the work space with this
video if you haven't already.

2
00:00:03,250 --> 00:00:07,230
To add the button if JavaScript is
present, we need to know how to create

3
00:00:07,230 --> 00:00:10,870
the button dynamically and
add it to the page with jQuery.

4
00:00:10,870 --> 00:00:13,950
I'll create a space at the top of
the document and make some notes.

5
00:00:15,320 --> 00:00:19,990
So we need to create
the Reveal Spoiler button,

6
00:00:21,710 --> 00:00:25,410
and append to web page.

7
00:00:25,410 --> 00:00:28,109
To create an element in jQuery,
all we need to

8
00:00:28,109 --> 00:00:31,885
do is pass a string containing
valid HTML to the jQuery method.

9
00:00:41,207 --> 00:00:43,688
JQuery then creates a new DOM element,

10
00:00:43,688 --> 00:00:47,460
you can then call any jQuery
method on the element.

11
00:00:47,460 --> 00:00:50,441
I'm going to save this new element
into a variable called button.

12
00:00:55,278 --> 00:00:59,539
Notice I've used a $ in front of
my variable name, this is a common

13
00:00:59,539 --> 00:01:04,700
convention when you create a variable
that contains a jQuery element.

14
00:01:04,700 --> 00:01:08,020
The $ sign before the name
button isn't required, but

15
00:01:08,020 --> 00:01:12,990
it's a great way to distinguish variables
that contain jQuery selected elements

16
00:01:12,990 --> 00:01:16,210
from regular variables with
other types of values.

17
00:01:16,210 --> 00:01:19,550
The element is created,
now we need to add it to the page.

18
00:01:19,550 --> 00:01:23,880
When you create a new element with jQuery,
it's not automatically added to the DOM,

19
00:01:23,880 --> 00:01:26,930
your users won't see it on
a page until you add it.

20
00:01:26,930 --> 00:01:29,010
There's another jQuery method for that and

21
00:01:29,010 --> 00:01:32,107
it's called append,
I'll show you how it works.

22
00:01:32,107 --> 00:01:33,860
Let's look at the HTML and

23
00:01:33,860 --> 00:01:36,718
figure out where we need to place
this new element we've created.

24
00:01:36,718 --> 00:01:41,130
We want to put the button here
where the other button is,

25
00:01:41,130 --> 00:01:45,740
yes, we can delete this button in our
HTML because we don't need it anymore.

26
00:01:45,740 --> 00:01:49,770
We're going to use jQuery to create it and
append it dynamically.

27
00:01:49,770 --> 00:01:55,120
The append method adds an element as
the last item within a parent element,

28
00:01:55,120 --> 00:01:57,890
so the element we're adding
will be added to the end

29
00:01:57,890 --> 00:02:01,200
of whatever the parent
element already contains.

30
00:02:01,200 --> 00:02:06,160
That means that if we append to
the spoiler paragraph tag, it will put

31
00:02:06,160 --> 00:02:11,400
the button right after this span tag,
which is exactly where we want it to go.

32
00:02:11,400 --> 00:02:16,878
Go back to app.js, to append, we'll first
select the element we want to append to,

33
00:02:16,878 --> 00:02:19,247
the element with the spoiler class.

34
00:02:22,780 --> 00:02:24,852
Then we'll call the append method on it.

35
00:02:28,896 --> 00:02:32,693
And to the append method,
we'll pass the element we want to append,

36
00:02:32,693 --> 00:02:35,513
which is this button element
that we just created.

37
00:02:37,276 --> 00:02:40,043
Now I'll save both files and preview.

38
00:02:45,152 --> 00:02:49,490
And it works just like before, but
now our JavaScript is unobtrusive.

39
00:02:49,490 --> 00:02:54,439
Since we're using JavaScript to create and
insert the button into the web page,

40
00:02:54,439 --> 00:02:59,241
if JavaScript is disabled our users will
still be able to view the spoiler, but

41
00:02:59,241 --> 00:03:01,753
won't see a button that doesn't work.

42
00:03:01,753 --> 00:03:05,617
Let's open up Chrome Dev Tools and
disable the JavaScript just to check.

43
00:03:11,767 --> 00:03:15,347
Great the text is visible but
the button isn't,

44
00:03:15,347 --> 00:03:19,024
I'll re-enable JavaScript and
refresh again.

45
00:03:19,024 --> 00:03:22,210
Here's a quick tip before we move on,
what if for

46
00:03:22,210 --> 00:03:26,798
some reason I wanted to place the button
here before the spoiler text,

47
00:03:26,798 --> 00:03:29,855
as the first element
nested within this p tag.

48
00:03:29,855 --> 00:03:34,590
Let me quickly show you how you can Google
to find other helpful jQuery methods,

49
00:03:34,590 --> 00:03:40,390
it's often as easy as googling the desired
behavior followed by the term jQuery.

50
00:03:40,390 --> 00:03:45,019
We know that append adds something to the
end of an element, I'll go to Google and

51
00:03:45,019 --> 00:03:49,107
search for, add

52
00:03:49,107 --> 00:03:54,466
something to beginning of element jquery.

53
00:03:56,254 --> 00:04:01,080
The first hit is a jQuery element called
prepend in the jQuery documentation.

54
00:04:02,700 --> 00:04:06,330
We could go to the documentation and
look at examples, but in this case,

55
00:04:06,330 --> 00:04:09,390
let's just plug in this method
in place of append, and

56
00:04:09,390 --> 00:04:10,910
see if it does what we think it will do.

57
00:04:12,230 --> 00:04:17,239
So we'll change this to prepend, And

58
00:04:17,239 --> 00:04:23,409
we'll save, And refresh.

59
00:04:27,305 --> 00:04:32,800
So let's inspect this element,
And it does.

60
00:04:32,800 --> 00:04:36,180
We can see that the button has
been inserted at the beginning of

61
00:04:36,180 --> 00:04:38,880
all of the contents of
the spoiler paragraph.

62
00:04:38,880 --> 00:04:41,049
Let's change it back to append,
and look again.

63
00:04:48,603 --> 00:04:52,060
Now you can see the button
has been placed at the end.

64
00:04:52,060 --> 00:04:57,120
Just a few seconds of googling and we have
a new method of jQuery in our toolbox.

65
00:04:57,120 --> 00:05:01,030
I would encourage you to Google often when
there's a specific task like this that you

66
00:05:01,030 --> 00:05:04,910
would wish to accomplish, it's
an awesome way to find out about new and

67
00:05:04,910 --> 00:05:06,010
useful features.