jQuery for Web Designers
Illustration by John Hersey

Adding, modifying, and removing content dynamically


From:

jQuery for Web Designers

with Joe Chellman

Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now

Video: Adding, modifying, and removing content dynamically

Something that we like to do quite often in JavaScript is, add elements to the DOM and take them away. This is something that can be a little bit troublesome sometimes. When you're working with, you know, JavaScript, at least when you're starting out, the jQuery makes it a lot easier regardless. So here we have a form with some text fields, and you'll very commonly see times where I want to fill out, you know, one field and then maybe I want to have more after that, like this. Well if I only need to fill out one that's fine and maybe I'd like to add more using JavaScript so that's what we're going to do here. Down here at the bottom of my example file with my script tag, so let's scroll up a little bit and look at the actual markup, so I have a group for my friends.
Expand all | Collapse all
  1. 2m 17s
    1. Welcome
      1m 4s
    2. What you should know
      37s
    3. Using the exercise files
      36s
  2. 11m 59s
    1. jQuery is a JavaScript library?
      1m 15s
    2. When to use jQuery
      2m 51s
    3. Alternatives to jQuery
      1m 24s
    4. Which version of jQuery to use
      1m 50s
    5. How to install jQuery
      3m 21s
    6. Reference materials
      1m 18s
  3. 19m 19s
    1. Getting ready
      2m 26s
    2. Selecting elements to use
      3m 54s
    3. Performing multiple operations on the same line with chaining
      2m 30s
    4. Using classes to find what you're looking for
      3m 52s
    5. Adding, modifying, and removing content dynamically
      4m 3s
    6. Challenge: Form feedback
      1m 12s
    7. Solution: Form feedback
      1m 22s
  4. 18m 28s
    1. Triggering a change based on activity with event binding
      4m 37s
    2. Reading and changing values
      4m 17s
    3. Working with HTML attributes
      4m 55s
    4. Challenge: Dynamic contact form
      1m 27s
    5. Solution: Dynamic contact form
      3m 12s
  5. 16m 42s
    1. Using the Colorbox plugin to build a slideshow gallery
      4m 22s
    2. Implementing Colorbox on your site
      2m 46s
    3. Changing Colorbox options
      5m 53s
    4. Challenge: Convert to a slideshow
      1m 6s
    5. Solution: Convert to a slideshow
      2m 35s
  6. 28m 37s
    1. Using jQuery or CSS to animate elements
      2m 24s
    2. Creating simple jQuery animations
      4m 35s
    3. Animating numeric properties with animate()
      4m 56s
    4. Understanding animation easing
      4m 4s
    5. Putting it together: Flowers in the cart
      6m 4s
    6. Callbacks: What to do when the animation ends
      3m 27s
    7. Challenge: Improve the animation
      1m 3s
    8. Solution: Improve the animation
      2m 4s
  7. 4m 45s
    1. More fun plugins
      2m 38s
    2. What's next: More jQuery
      50s
    3. What's next: More JavaScript
      1m 17s

please wait ...
Watch the Online Video Course jQuery for Web Designers
1h 42m Intermediate Oct 31, 2013

Viewers: in countries Watching now:

Take the next step in your web design career with jQuery, which amplifies JavaScript's power and puts a library of prebuilt functions and a diverse selection of plugins at web designers' fingertips. This course explains what jQuery is, how to install it, and use it to script more interesting, interactive websites. Author Joe Chellman will show you how to use jQuery to add web form usability, audio and video, animation, and other features like slideshow galleries to your existing HTML and CSS-based webpages.

Check out JavaScript for Web Designers for more detailed instruction on JavaScript.

Topics include:
  • What is jQuery?
  • Installing jQuery
  • Performing multiple operations with chaining
  • Using classes
  • Adding, modifying, and removing content dynamically
  • Triggering a change with event binding
  • Creating a dynamic contact form
  • Building a slideshow gallery
  • Creating simple jQuery animations
Subject:
Web
Software:
jQuery
Author:
Joe Chellman

Adding, modifying, and removing content dynamically

Something that we like to do quite often in JavaScript is, add elements to the DOM and take them away. This is something that can be a little bit troublesome sometimes. When you're working with, you know, JavaScript, at least when you're starting out, the jQuery makes it a lot easier regardless. So here we have a form with some text fields, and you'll very commonly see times where I want to fill out, you know, one field and then maybe I want to have more after that, like this. Well if I only need to fill out one that's fine and maybe I'd like to add more using JavaScript so that's what we're going to do here. Down here at the bottom of my example file with my script tag, so let's scroll up a little bit and look at the actual markup, so I have a group for my friends.

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.

So I'm taking out the value. So that I'm just showing a blank field, and I also need to fix this single quote, because this JavaScript string starts with a single quote, because of all these double quotes inside. So I just need to escape this one with a backslash. Now we should be good. So I'll save this, switch back over to the browser, and reload. And there, you can see we have more. Now I can do this as many times as I want. Now of course, you'd normally do this in response to clicking a button that says, hey, I want to add another friend, or something like that, but we haven't looked at events yet. So I'm just going to do this here in the ready function.

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.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

* Estimated file size

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed jQuery for Web Designers.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.