Add Elements using jquery Methods Part1

Add elements using Jquery Methods Part1

Hello guys, welcome to our series Jquery.

In our last segment we covered the topic ‘Get and Set Content and Attribute’.

Our today’s segment is ‘Add Elements using Jquery’.

In this module we are working with HTML, meaning how we are going to manipulate HTML using Jquery.

So when we make dynamic things like web applications, portals or websites then Jquery comes into the picture. how can we add, update or delete runtime things and these things are nothing but HTML content like css.

So today's topic is ‘add elements using Jquery’.

This means when we make web pages then we add things like head, body, some lists inside the body, table and forms etc.

Sometimes it happens that on the basis of the selection of the user we have to show some particular things.

For example, only if a user clicks on the contact form then only the contact form should be shown and only if the user clicks on the details then only the details should be shown. If we have to show the detail section then we don’t have to show the contact form and we don’t have to show the detail section we have to show the contact form it totally depends on the choice of the user.

So here dynamism comes into the picture that the website should be shown according to the needs of the user.

Let’s see the next example, if there is a dropdown or a checkbox or let’s say we take the example of any restaurant. What happens in a restaurant is we have a menu card but we cannot order all the things mentioned in the menu card, we only select the things we wish to eat or the things we like so here when the bill gets generated on the basis of what food items we have selected. So here dynamism comes into the picture like selecting only the required items from the menu and the bill should be generated of only the required things.

So if I generate a dynamic bill through an application then the list in my bill should contain only the name of the items that the customer has ordered.

So the things that a customer orders gets dynamically added to the list and not all the things mentioned in the menu. Then how are we doing this thing?

So every LI In my list, if you remember we learned UL LI in HTML that is an unordered list, ordered list etc, is nothing but the selection of my user or customer.

So how is this thing generated, it is generated dynamically.

So for such elements that we have to create dynamically , we have to add elements dynamically using Jquery.

So we will learn how to do this in today’s segment and we will also learn about the MNU thing with the help of an example.

So let’s start today's segment.

In today's segment is about how to manipulate element. The first method to manipulate the element is the append method.

The append method adds a new element to the existing element that means to add a P in an already existing P or if there is an already existing list with three items then to add a fourth or fifth item in the list or adding multiple list items.

So these totally new tags that we are adding or the completely new elements we are adding are done with the help of this append method.

In our last segment we learned about HTML and text with the help of which we added content and not complete tags.

But today we are adding a complete tag. So to add a complete tag or a complete element we would need the append method.

So as it is written here “The Jquery append method is used  to insert specified content as the last child (at the end of) the selected elements in the Jquery collection” which means whatever our current element is on using append it will add the last element for example if there are three P then append would add the fourth P.

If I have added a list item in an UL list which already has three items then append would add it as a fourth item so in this way the append would be generated at the end.

So here we have the syntax for append, it is a rather simple syntax, we are clear with the selector portion it will have P, class, id then dot append which is our method then inside the bracket we will have the HTML element like P, LI, TR,TD whatever we want to add or any object of Jquery but that is only of we are working with an object or the DOM element that means any one element from our complete DOM that means here also there will be a HTML element.

So whatever we want to add will be added inside this parentheses as a parameter. So this is our append method and this is our syntax though it is a bit difficult but when we will do the practicals for this it will become easier.

So how does append work, here we have an example for append.

What we do mostly in append is we consider the button click as a base that is all events work when we click on a button.

So we will consider a similar example here.

We will click on a button and as soon as we do so a new B tag will be added at the end of the already existing P tag. Means a new B tag will be added in P tag. How will that happen? Let us see that.

Now let’s open sublime text …and see how this works.

Here we will set ‘HTML’. (8 seconds pause, typing)

‘Example append.’

Here we will add our URL for Jquery so that our library gets added…

Here we have got our script….

‘Style’…

Since we always prefer keeping everything in the center , here “text align center.’…

‘H one’ …

We will add …‘example to append… content using …append’ inside H one since this is our append program.

We will save this program….

We will name the program as append.

Here we will select the button as well… and inside the button we will give the button id as ‘btn’ as of now….

‘click’….

Now if we run the program.(5 seconds pause,typing)

So here is the program, ‘example to append content’, here is our button and when we click this button then something will be added inside our P.

So let’s say as of now we will add some P tags in the program like ‘..this is a…statement’ and something else like… ‘this is… another statement’.

So here we have our two statements.

Now if I save this and then reload, here we have our statements ,'this is our statement’ and ‘this is another statement’.

Now nothing will happen on clicking but I want that when I click on this a new statement should be added here after this P.

So let’s say first we will have to write the script ‘dollar.. document dot ready… function’…. and here dollar….

Now we have to add it on button click so ‘hashtag btn dot click( 5 seconds pause,typing) function’…

And here what we want on button click will go over here…

So let’s say I want to add something after these two P on button click.

Since I have to add after P.

So ‘ dollar …P dot… append ‘ , inside append we will write, let's say I add a bold statement… like, inside B ‘this is the new… statement’

We will save this.

Reload

After reloading if I click then I should see two added statements, so as you can see after clicking we get this is a statement and then without space we see the new content.

Now if you see carefully this is our p and after p we have added a new B statement .

So is this a newly generated P or something has been added with the P, if we want to check that then after right clicking I will go to inspect …(6 seconds pause)

So now when I hover over this is a statement then my this much portion is highlighted and when I hover on b then my new added statement is highlighted. Clear

So as you can see here is P and here we have closing P means my new statement is not added after P but it has been added inside P but since I have kept it bold so it has been added with B tag.

If I remove this B tag, then this statement without bold will be appended with simple P.

Since  I have kept it bold, it appears in dark color.

So this is my P content and this is my rest of the content.

We can see these two things.

Here we can see the new content that has been added to the P tag and new P tag has not been generated. I hope I am clear here , that the new p tag is not generated.

Now let’s come to this program.

As we have seen, if I have to add a complete new list item, let's say I copy the same program and here I will change some things like example append two and here one….

So we will add a new list item here in two, for example this is my UL …and I will give this an id… ‘unordered list’… clear.. So here my P will be replaced by a hashtag unordered list.

We will keep the append empty.

Here we will generate some LI.

Let’s say we make a list of fruits. For example here it will go banana, (5 seconds pause, typing )mango, (4 seconds pause,typing) apple, (5 seconds pause,typing) papaya. Clear..

We have added four fruits here. I will save this program as ‘append underscore two’.

So this is my program.

As you can see since we have kept it center aligned so here the discs have appeared which are not looking that good so we will make this UL (6 seconds pause,typing) ‘list style.. type.. none’.

So here the discs have disappeared.

Here is our list and we can see these four things .

Now I want that when I click on this then some new list items get added.

 So let’s say I add an ‘unordered list’ ,append, now what will i add? A new LI so, ’LI slash LI’ …

New item inside the new LI.

Save , reload.

So every time I click a new item will get added.

So if I inspect this as you can see banana , mango ,apple and papaya are already list items and a new item is being added as the new list item.

So basically append does? It adds new things inside the new tag it is used with.

So the real time example I gave you regarding the menu is that all the items the customer selects from the menu will get added to the bill.

So it works in a similar  way that everything I select will get added to my bill.

So this is being done dynamically.

We don’t note all the things instantly,sometimes customers eat two things and after eating half he orders the third thing so sometimes the customer adds the things according to their own convenience.

So here things get added as per requirement.

This is our example in reference with a bill that as we click new things will keep on getting added.

This is how append works. If we want to add something new to the current tag then that we can do with the help of append.

We will go to the slide. There is one more similar method to append called append to.

So guys that’s it for today’s segment, let's meet in the next segment where we will continue this topic and we will see the rest methods of the same topic. So see you in the next segment.