Add Elements using jquery Methods Part2

JQUERY HTML METHODS

Add elements using jQuery methods part 2

Hello guys. Welcome to our jQuery series. We will continue the previous segment in today’s video as well. So today's video is the continuation of the last segment. Now moving on according to the previous segment.

Now we will see what is the use of the appendTo method. So basically both are exactly the same, there is no difference between them. The only difference is, that here we have to pass the selector. Like what 's written here, “The appendTo method is used to add additional content at the end of the selected elements.” So append and appendTo both add at the end of the content. 

“It is the same as jQuery append method”. It means that it works the same as the append method in jQuery that we studied about just now. But what is the difference here, the difference is that “only syntactical difference between append and append to” means that the difference is only in syntax. So what we did in append. We used our regular way. First we took the selector then we wrote our method with dot append. In appendTo we perform its opposite. First we write what we have to add then we write a selector with appendTo. The meaning of syntactical difference is that there is a difference in syntax. The difference is generated in how the syntax is written. 

So if you look at syntax here, what comes first ‘content’, ideally the selector comes first in all the jQuery methods we looked at till now but in this case the content comes first means what we have to add will come first then comes the selector.

So here is an example. Here I took a span ‘hello learnvern dot com’. So where am I adding this spam? At the end of P. So if I use append, first I’ll write P instead of appendTo then I’ll write append and then the content portion. But right now I am using appendTo so first I’ll write content and then P.

So let’s take the previous program I made with P. I’ll copy the same program and paste it…This is my program of appendTo…. I am removing this portion. And this is my P. I am removing one P from here…. This is …LearnVern, save. (4 seconds pause, typing)

Now we will run this program. Okay. So this is our program. Where I’ve written examples to append content using append. So it’s not the program of append, it’s the program of appendTo. So here it will be appended content using appendTo. Right now nothing will happen on clicking but what I want to do is. I want to add a statement after this is LearnVern. But this time I’ll use appendTo. So what I’ll do for appendTo. We’ll do this on button click. So in the button click, Dollar. Here will be my statement. After space I’ll add… B…. slash so we can identify what we added extra. LearnVern… is an…. awesome place to learn…. jQuery. Okay5 seconds pause,typing) .

(03/48)

So when are we doing this? This is our content. We wrote the content first, Dot appendTo, that means our method. AppendTo. And what will come here ‘P’ so we’ll write here P, clear?

So now I’ll save it, reload the program and run it. So what do we get here?’ This is LearnVern,  LearnVern is an awesome place to learn jQuery’. Here I’ve given the space but it’s not visible so I am giving space inside it and now when I click it again, my statements start after a space. So you can see my new statement here in bold. So this is our appendTo. So now you can see what is the difference between append and appendTo. You can see that this is a syntactical difference. When we wrote here first we wrote content then appendTo. In case of append first we wrote selector then append. So the difference is only in syntax, nothing else. Both will work exactly the same. 

So this was appendTo. Now coming back to our slide. After appendTo here comes the prepend. What does append do? It Adds the content at the end. So we had the list items. 3 list items, so at the end the fourth list item was added and the fifth list item was added. So in this way the list items were added. So according to the name we can guess what will prepend do. If append add at the end then prepend will be added at the beginning. So the same thing is written here. “The jQuery prepend method is used to insert the specified content at the beginning as a first child of the selected elements”. If you come across a requirement that items are to be added but in the beginning that means in the beginning of the existing list, before the existing elements. Suppose you made a table and you forgot to add header and content is already added. So what we add above content. We’ll add a header. What can we use to add a header we can use, prepend. So the syntax of prepend is similar to syntax of append. The only difference is in their name and the task is completely opposite from append. It does the opposite of what append does. Rather than adding at the end it adds in the beginning. This is what prepend does. 

So here we have a dollar selector dot prepend and whatever content we have to add. Prepend is easy. It’s similar to append. So let’s say, the program that we generated with append, the one with the adding statement under P. Same as we will do with the prepend so what will happen in the statement ‘ this is the new statement’ will add in the beginning rather than at the end. So let’s say that I copy this complete program and paste it here. Example.. prepend…. Now here we will remove this content. So if I add a P tag here 4 seconds pause typing). This is, (5 seconds pause,typing) let’s say we write. LearnVern is awesome but in the beginning we have to add. This is LearnVern. So here this is P. So what do I have to do on button click? I have to use prepend. So here it goes P dot… prepend.(5 seconds pause,typing)  Then here is LearnVern after I use space means after a full stop and space comes semicolon. So what will happen from this program? I already have a statement ‘LearnVern is awesome’. What will be added before this statement? ‘This is LearnVern’… So I’ll save it by the name prepend.

Now we’ll run the program. Here we will write, ‘example to… prepend content using…. prepend’. …Reload, click. So you can see here that the statement I added in bold is added at the beginning of the existing statement.’ This is LearnVern’. Then there is the existing statement LearnVern is awesome, the statement that I added with P. So what I added dynamically afterwards was the prepend statement that adds at the beginning of the statement. So it’s the complete opposite of append. Append add at the end and prepend add at the beginning. Let’s go to the slide. 

(09/00)

Now comes the after method. What is the use of after?’ :The jQuery after method is used to insert specified content after the selected element’. So here append and after have exactly, same to same tasks. So if append add at the end of the element then after also add at the end of the element. Append had its opposite method that is prepend method. Similarly after also has an opposite method that is before, method. So it’s after and before. There we had append and prepend here we have after and before. So what’s the task of both methods? After adds at the end of whatever we select and before adds at the beginning of the selected part. 

So let’s say we take an example of. after. We’ll take the same example for after that we took for append. So now I’ll paste the example of append here. Here I’ll type after... I’ll replace append with after. Then I will give space and write ’LearnVern is …awesome’. ….And here(5 seconds pause, typing) ‘this is learnvern’. Okay! 

We’ll save the program by the file name ‘after’. And now when we run the program. Here it’s after. I missed the heading. Example to append content using after, reload. Okay, so an example to append content using after. Reload.. Now this time how will I add a statement after ‘this is LearnVern’? With the help of after click. So you can see that my statement is added here. It’s the case of append. Here we have the case of prepend and here the case of after. So there is some difference after and what’s the difference? Let’s say… here I’ll run append dot HTML. Okay! So as we can see here in append the statement is added exactly after the existing statement. Here it’s added below it. 

So what does this indicate? This means that whatever I added was not added inside it. If I inspect it, what will I get? See here is ‘P’ after this P ended then a new statement was added with B. So this is the difference between append and after. What does append do ? It adds the content in the existing tag to the statement that we passed here. But what does ‘after’ do? ‘After’ is added after the closing of the current selector tag. So if I add in P then append will add in P. But after will add when P is completed, after P. So here my new statement is added below the existing statement. So the difference is clear now. 

Append and after work are exactly the same but there is a slight difference in their functionality. Now I’ll write it here again with ‘before’. …So here it’ll be ‘This is LearnVern’(4 seconds pause,typing) and here comes ‘LearnVern is awesome’. (8 seconds pause, typing) Alright. So here we are using it before. Now save…, before. Let’s run the program. So as you can see here first I printed LearnVern is Awesome. As soon as I click on the Click button, my statement ‘this is LearnVern’ will show beside the button and before this statement. So hypothetically what is the work done here? My content is added before this statement. For the proper view I should add the ‘BR’ after the button so that it looks good, nothing else. Clear! As I click here is my statement B tag and after that its P tag. So we can see P after B.

So after and before. After, ‘After the current content’. Before, ‘Before the current content’. 

So today we learnt about append appendTo that are almost similar but only syntax is different, append, prepend, after and before what are those we have discussed and we also learnt the minor differences in these are also discussed. 

(14/10)

This is the example of after. Here we covered before and after together. But insertAfter is also a method. The task done by insertAfter is the same as the task done by appendTo. In the append method first comes selector then we add content but in appendTo first content, then selector. 

Exact same task is done by insertAfter. What does it do? First it accepts content then the name of insertAfter method and target. Selector comes under the target. What is the target? “In insert after method content is the selected element and target is placed as an argument”. That means whatever is the selector. So in case of after, insert after has the same task as appendTo. So the task of AppendTo is the same as that of InsertAfter in the case of After. So it's like Append, AppendTo. In here After, InsertAfter. 

So we have to take insertAfter what we’ll do? I’ll paste the case of appendTo, the program of appendTo. I’ll rename it,.. insertAfter. …Alright, so here you can see, above the button click, ‘LearnVern is an awesome place to learn jQuery’ will be added after this P tag. After ‘This is LearnVern’. When? When I click on this button, I just added insertAfter method name in place of appendTo. I’ll save it now, InsertAfter….We’ll run this program. This is our program. You can see here ‘example to append content using insertAfter’. So something will add after this but definitely we are using after so content will be added in the next line downwards. Click “LearnVern is an awesome place to learn jQuery”. When I clicked the content added in the next line. So this was insertAfter. Now all the methods for adding elements are completed. 

InsertAfter, then we already saw ‘before’, then ‘before’ example that we covered. So in total, in today’s segment we covered a total of six methods. Append, appendTo,… before, prepend, insertAfter, after and before. So in total we covered six methods. In all of them we also saw the difference between them. We also used inspect to check and look at the differences. Basically when we have to add elements dynamically and how? So that all the things have been covered in today’s segment.

So guys today's segment is very important because when we work with web applications then it is very important that we make dynamic elements only. 

Static web application is never possible because we have to work a lot on that. Websites usually provide information to users. So we give static writings, images, graphs etc. But when we work on dynamic elements, that is our web application, then we have to add elements or delete them or we’ve to create multiple elements or remove them at the run time. So if we want to do all this then all the methods of jQuery that we learnt today are very useful. 

So guys we learnt six methods in today’s segment that are easy. I request that we perform all the practicals we did today related to these methods. You can find the code file in the description box. You can take the practices from there or perform your own practices. If you find any issue or difficulty in whatever you are doing or if there is something you didn’t understand in today’s segment then you can share with us on forums dot learnvearn dot com. We will revert to all your questions with solutions.(discussion to be added)

We’ll meet in the next segment, today we learnt to add elements, in the next segment we’ll learn to remove elements. 

So let’s meet in the next segment. Thank you.