Adding New Elements to 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