Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Jquery 3
  • Overview
  • Transcript

2.2 Add and Remove Content

We can also add or remove HTML elements to the page with jQuery. In this lesson, I'll show you the methods that the jQuery library exposes for adding and removing elements.

2.2 Add and Remove Content

In the previous lesson we looked at the jQuery methods for setting content. And a lot of times, that's what we want to do. We want to set content and we solve that in the previous lesson. Whenever you set content you are replacing the existing content, with new content. But a lot of times we don't want that functionality. We want to keep our existing content and add new content to it and jQuery gives us methods for that purpose. So the first method we are going to look at is called append. This is going to append new content at the end of the existing content. So for example, we have our div element that has an id of hello world and then we have our P element that has our hello world phrase. This is the same HTML that we started with in the previous lesson. So let's say that we want to append another P element and this is just going to be new content here. And this is the result that we want. But we don't want to do this with HTML. We want to do it through JavaScript using jQuery. So let's cut this HTML, that's what we want, and inside of our JavaScript, we're going to make that happen. So we call the append method, we pass in the content that we want to append to our div element, and we see the results here. Now if we look at the markup, we're going to see exactly what we want. We have our div element inside we have our existing P element but then we have the new content that we appended to that div element. Now, the jQuery library also has a method called prepend, which is just pretty much the opposite of append. Instead of appending the content at the end it's going to add content to the beginning. So let's do the same thing. But this is new content at the beginning. And whenever we save this, we're going to see the new content first, the existing content in the middle, and then the content that we appended at the end, and if we look at the HTML that's what we have. There's our new content, the existing content, and then the old new content. Now, in addition to append, and prepend we have methods for adding content before our selected element and after our selected element. So that means that we can add content before the div element and after it. And of those methods are called before and after. So let's look at the before method first, let's have another div elements we're not gonna have an ID or anything like that. But let's say that this is also going to have a P element and a this is before we need to close those tags. And we can go ahead and copy this and paste it. We will use this for the after as well, except let's change the content to say that this is after. So whenever we save this, we're going to see new content before we save this is before, this is after, but if we look at the HTML, that's where the proof is in the pudding. We now have a div element before our existing div element with an ID of hello-world. That div element says this is before. The div element after says this is after. Now the really cool thing about each of these four methods is that you can pass multiple types of data to them. So you don't have to have a string if you don't want a string. If you have an actual element object you can pass that element object to the append, prepend, before or after method. So, let's create a span element, using the standard DOM API. So we want to create element, it's going to be a span. And let's set the text to something, and we're going use innerHTML to do that. We'll just say this is a span element and let's append this to our div element with an ID of hello world. So we're going to call the append a method and we will simply pass in that element object. We now see this is a span element and if we look inside of our inspector. We're going to see the P elements that we had before. And then the span element at the end. So that's a really nice feature but we can also take this is a step further. Let's create this span element at the very beginning of our code after we retrieve our our div element. And we're going to pass both this text of this is new content and our span elements. And we're going to end up with the same results. It's going to take the first argument that we pass to append. Which is this P element is going to append that to our div element. Then, it's going to append our span element. So, we have the same result. It's just a slightly different way of getting there. So, you can pass as many arguments as you want to append, prepend before and after. And it's going to add the necessary content wherever you specify it. Now if you can add content that typically means that you can remove it as well. And we have two methods for getting rid of content. The first is called empty and that is going to completely empty an element. So if we call the empty method on our el object here,then it's going to clear everything inside of these elements. So let's save it,we see that we have this is before and this is after. But remember that, those div elements are not inside of our hello world div element, those are before and after. But you can see that there's nothing inside of our existing div element. So the empty method will clear out an element. But sometimes we want to remove an element, and we do that with a method called remove. So by calling remove on our element here, it's going to remove that element completely from the document. So now whenever we inspect we have our before and after div elements, but nothing in between, because we removed that element. So jQuery gives us four methods for adding content to our page, append, prepend, before and after. These methods accept multiple types of data and they also accept multiple arguments. And when you want to remove content from the page, you have two options. You can call the empty method to remove everything within an element or you can call the remove method to remove an element.

Back to the top