Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Let's take a look at inserting content using jQuery. So, jQuery provides several functions for inserting content into the document and for modifying the document object model's DOM tree. And you can insert content into the document before and after existing page elements. You can also insert content inside of elements. There is a bunch of functions to do this. So, let's go over them. Append and Prepend functions allow you to insert content inside of other elements.
So the Append function takes the content here and that will append the content inside every one of matched elements that this function is being called on. Conversely, the Prepend function will take content and put it at the beginning of the inside of every matched element. The appendTo and prependTo work pretty much the same way. Although they're called on jQuery selectors. So, in this case, you're specifying the content to append; in this case you're saying here is the set of matched elements I want to append or prepend content to.
So, that's for inserting inside of elements. The after and before are kind of analogous to the Append and the Prepend functions. So, the After function takes content and inserts it after each one of the matched elements. The Before function inserts content before each one of the matched functions. And we saw an example of the After function in one of our previous lessons when we were building our annotated page links. The insertAfter and insertBefore again, they work the same way.
Only in this case, they take jQuery selectors to insert matched elements before or after another set of matched elements that will match this selector. Let's take a look at some examples and we'll see how this works. Here in the exercise_files folder, I am going to open up the inserting_start file and this is the finished version right here. So, let's go ahead and do that. I am going to open this up in my editor. So, you can see we're back using pretty much the same document that we've been using for a couple of different examples now.
This is the one with the unordered list and some paragraphs. So, here's what we're going to do. Let's jump back over to source code. Let's try out some of these functions. So, first thing I am going to do is write a jQuery statement for paragraphs. So, I am going to get all the paragraphs in the document and I am going to append some content to them. And what I am going to append is a string that says "with some content appended." Okay, so if we scroll down you see that This is paragraph 1, This is paragraph 2 and we're going to add the string on to the end of each one.
So, let's go ahead and back out to the browser. We're going to start this up. And you can see what happened was each one of the paragraphs now has the string with some content appended on it. That content was appended to each one of the matched elements and in this case, let's go back to the code. We've got all of the paragraphs. If I were to do something like a filter like last or first or something then only those paragraphs would have been affected. So, let's try something else. Let's do the opposite. Let's do p, only this time we're going to prepend.
I am going to write, "Hello!" Okay. So now the same thing is going to happen this time. I am going to save and we're going to back out to the browser. Okay, now when we refresh, you can see that in this case the word Hello has been prepended or inserted at the beginning of each paragraph. Back to the code. Let's get a little more fancy. What we're going to do now we're going to use the appendTo and prependTo functions for manipulating the DOM tree. So what we're going to do is write a jQuery accessor that says get me the last paragraph and append that to the first paragraph.
Let's save that. Go to the browser and see what happens. I am going to refresh. And you can see what happened is paragraph 4, which used to be down here at the bottom, has now been appended to paragraph 1. So, we took the last paragraph and appended it to the first. Let's do a variation on that theme. Comment this one out. But using that as the basis for the next one. What we're going to do in this case is instead of appendTo, we're going to say prependTo.
Okay, so now we're going to save. Go back to the browser. So, now I am going to refresh it and you can see now that the last paragraph has been prepended in front of the first paragraph. Okay, so I think you pretty much get the idea. This pretty much wraps up using the content inserting functions. That should give you an idea of how you can insert content into your document and use these functions to move elements around within the DOM tree.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 100158 Viewers
56 Video lessons · 113178 Viewers
71 Video lessons · 82038 Viewers
131 Video lessons · 39367 Viewers
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.