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.