Viewers: in countries Watching now:
And I have a group for my pets. And what I'm going to do is add some more fields here using jQuery. And the way I'm going to do that is by selecting this group and I'm going to add on to the end of it another input field. So let's select it first by it's ID. And then I'm going to use the jQuery append method. And this is how you add something on to the end. So what am I going to add? I'm going to add one of these input fields. This is one of the nice things about jQuery is that you can just put in a fully formed piece of HTML and it will take care of all the work behind the scenes creating any dom nodes and all that kind of stuff that you need to make this thing appear where you want it to.
Okay. So that's append. I can also put things at the beginning of a set, and so instead of append, I can use prepend. So I'm going to save this, come back over here, reload it, and look. Now, this is not necessarily what I wanted, but it is what I told jQuery to do. Because here is my group, and I've said pre-pended, so add it to the beginning, which puts it in there before the label. If I inspect this, right-click, and inspect this element, you can see there it is. It's the first element inside the friends group. So, I can't use prepend to put this at the beginning of my list of input elements.
You'd have to find other methods to do that. So, what if I want instead to remove some of these things. Like, if I've clicked my Add button too many times and I want to remove some of these things. So, we'll do that with these pets. Close this inspector. So, this code name is pets. So jQuery has a remove method, but if I just use it this way it's going to remove the entire group. Watch, and it's gone. So what I need to do is choose specifically which of these elements I want to get rid of. So what I'm going to do is use my Find filter and I'll use one of J query's special selectors called last, and I'll make it a little more specific to make sure we remove the right thing.
So I want to remove the last input. I'll come back over here, reload, and now there's only two. So, using the right selector or the right filter on a selector, you can make sure that you remove the right thing. I can also make copies of things. So let's say I wanted to make a copy including whatever is currently filled out, all the attributes, the whole enchilada of one of those inputs. So, let's get the first one and we'll make a copy of it. I'll save that. So I'll reload and nothing happens. This is actually the expected behavior, because this clone method doesn't really know where I want to put this.
All it does it make the copy for me. So I'm going to save this, in a variable called copy, which I start with a dollar sign, so I know that it's a jQuery selection, and now I'm going to append somewhere. So in this case I'll just append it to the same group. (NOISE) Here we go, and there it is. Now I could append this anywhere. I could append it to the body, and now it appears at the end here. Or you know, I could prepend it, put it wherever I want. jQuery has a lot of different methods that you can use for adding things to the dom and taking them away. This is just a small sample to help you get a feel for the kinds of things that are available, but for more, you should definitely check out the documentation.
There are currently no FAQs about jQuery for Web Designers.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.