jQuery wrappling

Hello guys, welcome to our series in Jquery. In our last segment we have seen about removing elements..

So we will start with today's module, today we will be learning about Jquery which is related to html and the module which is going to be taught today has one more segment which is wrapping elements using Jquery,In starting we have seen how we manipulate html, how we add html element and how we remove html element.

In today’s session we will be seeing the element which is already in the dom. For example, an element is there in a web page we created and how to wrap the element means sometimes there is a sudden requirement to us if we have random elements, For example we take an example of P-tag, it is a tag is a random element which programmers have defined.

The problem is to cover all the five P-tag into one class or we can say that we have to apply a specific class to all five P-tag by defining div or parent div, so what can you do? First option is that when you are doing programming or making a web page we can define div and assign P-tag but what if when a web page is getting developed wrapping is already done or it has been ignored, so how can we do this?

 Which means when you work with a big work application you may get many requirements like the elements or page which you have got to cover in some other page or to cover in other div.

This topic, we can consider as an advanced level topic because its example is not directly available in website making, but when you are developing web application and the response we get from Api, we don’t know how many records or response does that Api contain it can be thousand or two thousand and can also be hundred.

So, when we work with multiple and big numbers we have to work dynamically. If there is a scenario when we have to cover run time in any of div, p-tag or in Ul, Li

We have got five list items and we have to cover all those in one UL this all thing which are getting dynamically performed we have our today's segment, So wrapping elements using Jquery directly does not help in website making, but when you work with web application, Api’s, responses, dynamic data in that today's segment is useful.

So we will start with today's segment, it is named as wrapping segments and our first method is wrap method. “Wrap method is used to wrap specified HTML elements around each selected element”.

 As I have said, take any p-tag or five collections of p-tag to cover all in one. We use this wrap method. So usually when we pack a gift box we call it as wrap means the box we have we wrap it with from different paper which is eye-catching and has a glorious look to make a gift box.

Here also we use the same concept. We have many p like a gift box. We have many p-tags to wrap it with a div class or we have many list items with Li tags randomly to wrap with Ul ordered list or unordered list or definition list.

The second line here tells us that “the wrap function can accept any string or object that could be passed through dollar factory function”, which means we can cover any string, any jquery object or objects available in the dom using wrap function.

(05/15)

We will be seeing this in an example so it will be clear,  here the dollar selector dot in this portion we already know and always say that it is our class, id element and all. And the dot wrap method that we have and inside the bracket all the elements we have to cover will come.

Which means if I have to cover p-tag with multiple div inside the bracket, parentheses and quotes as div and slash div. I have any statements, to cover that statement I have to write p slash p. If I have different Li’s so to cover them what I will write inside the quotes UL slash UL.

To place any element randomly we will add inside the parentheses, We have an example for this, you can see here after writing document dot ready, we are performing everything after button click, because our Jquery is working on any event. So on our button click let's say that inside the p everything which is written p we have to wrap inside the div for this code is already written.

So we will open our sublime text and we will perform…. We have opened our Sublime text, firstly we will set it to HTML…. After that HTML, …we have our example of wrap method so we will write this.

We will add script as we add it everytime to add our library. So this is our library URL and style which we have to perform. Let’s say I generate with the help of an example so my p-tag is wrapped inside the div after that its color should be changed because we can check it in two ways first we have already joined the css to div. So when my p will be covered inside the div my css of div will be applied and we will get to know that it is wrapped.

Second case if we have not written any css what will happen? We have to check using the inspect element to see both ways. Firstly we will not add css and we will check without css and after that by adding css I will also show that. Let’s say firstly I will write “text align” inside the body and here my code will come and we will save here (5 seconds pause, typing)  with name wrap inside the program. Now we will take a H one tag, inside it we will write an example of wrap.

Let's say I also have a p tag inside it. We will write “this is a statement”. Save…  Now we will run this program, so this is my program. You can see the example of wrap and this is the statement. Let’s say I will add a button and when I click this button my p tag should be covered inside the div.

So if now when you see I can show you on inspect after h one p is coming means first there is h one there is no div and after that directly there is p tag. When we wrap it inside p it will be wrapped inside the div. So let's say we will go to our code, now we will take a button we have our button id and we always write as click, so now we will write its jQuery script.

Here we will write the dollar which  is our factory function document dot ready dollar document dot ready and its function and our function has started. Now we have to fire on button click so its dollar and we will put as button inside the bracket dot click dot function this will be fired on click. We have also taken button id so we will also add a hashtag and save.

So now you can see button add when the page is loaded. Now also div has been not added it is as earlier h button and p. When we click a button nothing happens. Let's say for covering it, so we have p tag so dollar inside it we will put p dot wrap which is a method inside the quotes we will write div or slash div also cover both the points means starting and ending points should be quoted so to wrap properly, now we will save this program.

(10/58)

Now we will reload it and we can see that now there is no div tag,there is a P tag, and now when we will click. When I will click after clicking on button div tag gets added, when I will add it my p tag is getting added and button is also created with a div tag beside it and p tag is same as I mentioned. When i will close this and click it again so you can see there is no difference in the output. But when we will go in to inspect and check our p tag is inside the multiple div because we have clicked it multiple times this means that how many times we will click multiple div will be created.

So this is our wrap function where our p function where we create as many div we want. You can wrap with any name. It is not mandatory to wrap with div but usually we wrap inside the div tag, UL tag if we have to make table so table tag but for this we need tr, td which generates roles means you can cover it with any tags depending on your choice. In this way when you click it new tags will be created immediately. Now I will reload it and here the div which was not created by us for that I will add a new class div …background ….color…. as light coral and save.

We will reload it now there is no background color because it is not wrapped. I have intentionally closed it. Now I will click it. My background color is getting added so how we have done this background color is getting added because my p had got covered inside the div. So the background of my div is getting added with my p.

You can see that when we inspect it inside the div p is there so we can see the output of css. So the color which we have taken light coral I can see in the background and p tag is as it is. Now if  I have to identify whether my content is wrapp or not we can do it by inspect or we can give it a css so when css works we can understand my div is getting added so this is our wrap function.

You can see it over by clicking multiple times. Many divs are created. You can  see I have pressed three times. There is no difference but my divs are getting three times added so this is my first and you can see that three times div are added. So this is how div works. So here we have wrapped a P tag inside the div tag. Now we will go to the slide. Our wrap method is now completed here.

After the wrap method now comes wrapInner method, what works does wrapInner  method do, you can see over here “the jQuery wrapInner method is used to wrap an HTML structure around the content of each element in the set of matched elements.”

If we go through the complete statement this is difficult to understand but between wrap and wrapInner, there is a simple difference. Wrap is used to wrap complete element if we also see our example you can see that my p tag is completely wrapped inside our div tag but let's say that I don’t want to add div outside the p tag I have to cover the content of p tag inside it so, the content which p tag contain have to be covered. To cover the inner content which tag we will use that is wrapInner means if I go to inspect and click you can see here outside the p div is getting added.

But what if I have to add inside the p if I want to add inside the element of a tag for that i will use wrapInner method. So how we will do this, let's say that the p tag which I have currently contains neither italic nor bold, so let's say I do it Italic for doing this we will go to our slide.

Firstly our wrap function we had we have to execute it as we did before, syntax is also same after selector there is wrapInner method and what we want our element to be passed. You can see in the example I want my p inner content to get covered by the em tag, you know that for what em tag is used if you have completed our HTML course. To make our text italic we use the em tag so I want my text to get italic after clicking on the button.

So for this there is a simple program, the program which we have written. I will copy that and paste here it will come wrapInner, here also it will come wrapInner… the name which our function has. Inside the div we write 'em because we have to do it italic.

Now we don’t have a div, so we don;t have any use of div and our button click will be as it is an example of wrappInner… save. ….We will give the program name as wrapInner and now we will run our program…. So this is our wrapInner program, so you can see that wrapInner is written here, so what I have done in this program I will click on non Italic content that will be converted to italic, so I will click you can see that as I click my text becomes italic but this is our front end actually what operation has performed that is you can see on inspection inside the p “em” tag has added.

(17/24)

Which indicates that when I use wrap method outside the p em tag is getting added and if I use wrapInner method tag is added inside the p. Now here as per requirement you have to identify what you have to do if you want to play with content so you will use wrappInner mostly and if you want to  play with outer content means more than one content all content you will use wrap.

Now we will come to slide,  this was our wrap inner method now comes wrapAll method. The WrapAll method from the name indicates how it is used. “WrapAll method is used to wrap specified HTML elements around all selected elements in a set of matched elements” means if I have taken p, all p tags inside all my wrap what I have written by that I will cover. It means, I have taken multiple p elements that all will be covered by a single p tag.

To understand that example what we will do is we will first take our wrap example, I will name it as wrapAll but I will keep it as wrap method as it is now and here will come wrapAll. You can see it here. “This is a p statement” and I will write the same statement three times. I will save the program with wrapAll name. I will run our wrapAll now you can see here three p tags this is a statement there are three p tags and now if I will click so what will happen that div will come every single means if I have three p, every p will be covered by multiple div this p is under one div other is under another div, likewise our structure is generated.

You can see it here under div there is p, one more time there is p inside div, if you will use wrap you will not get this structure but if you will use wrapAll what will happen.

So lets say here I will use wrapAll, I will reload the program and will click so what difference do you see? My p tags are covered with single div, if I will go to inspect and show you, you can also see that all three p have been covered by single div means if I use wrap method my individual element is covered my div but if I use wrapAll my every p where ever they are all will be covered by single div.

Lets say between the div I will add h three tags and I will write (5 seconds pause, typing)  “this is a heading”, I will save this reload it and you can see that there is one p then h three and after it there are two p. Now we will see the output so you can see that my p have gone upwards and my h3 come downwards, wrapAll also does one more thing the multiple p tags which we have in dom also club all under one place means if we have not use it we can think that first p will be covered under itself and rest all p will be covered separately but this was not happened h3 went down and p tags have come together our wrap all function is covering with div.

So here we have learned two things: the difference between wrap method and wrap all method. So if you want to keep elements in structure and you don’t want to change hierarchy if h3 is in the middle so keep h3 in the middle so it's better to use wrap and cover the multiple wrap. If you want to use wrapAll and you don’t have any problem when structure changes so you can use wrapAll method. So this is our wrapAll, so the next method is unWrap so this is a simple method and by name you can know that it is opposite to wrap which is unwrap. If we have already wrapped something if the p tag is already wrapped inside any div so to remove it from the div we can use the unwrap method.

So for example if I use a program already i will keep color under div and perform unwrap. I will paste the same program here, so this is my unwrap function…, here it will come unwrap and if you have seen the syntax…. there is nothing inside the unwrap parentheses.

(22/52)

Basically so our unwrap will do, it will remove our parent element so what I will do is the program I will intentionally keep up inside the div…. Okay so what will happen? My statement will already look like light coral which I have kept earlier.

So this is my unwrap, here also unwrap… and we will save it by name unwrap and we will run the program. Okay so now you can see that my p had been covered by div okay so outside the p there is div because of this we can see this light coral color. As I click the button my p will get unwrapped by div. If it gets unwrapped my css should also get removed. Let's see if it works or not. So as you have seen that as I click light coral get’s removed and the div which was outside the p also gets removed. So unwrap is clear to us now like how it works. Parent element so what was the parent element of p? div right, so p the parent which is div gets removed. Let's say in place of p I keep multiple p and …here I will also keep one more div and I will write “this is…. the second statement”. We will run this now so you can see this here we have kept three p inside the first div and one p inside the second div 24.34

And we have given it different statements as well, so if we click now, then what will happen? So as you can see, all the “p” parent elements are removed.

Means a common div is removed from clubbed p and div from independent p is also removed. Means it will work the same in the case of multiple, meaning whichever p is identified by our parent element, don’t remember div, remember parent element, whichever is our element there, parent element will be removed from there.

In our example, the p tag will be removed. So this was an unwrap method. In today’s segment of our wrapping element we have learnt 4 things, how to wrap, how to wrap our element from outside, how to wrap inner content of element, how to wrap all the elements together and how to unwrap.

So we learnt four methods : wrap, wrapInner,WrapAll, unwrap.

I will once again tell you where can you apply this, when you will work with web applications then you might have to work with dynamic data and all the methods that we have learnt today are very helpful with dynamic data, it is not that it will not be useful in web page if you have to make partially dynamic websites or you have to generate totals in that case also you can use this method.

It is better to have knowledge about these methods so whenever we want to use it, we can use it properly.

So in today’s segment we learned how to manipulate element by wrapping and unwrapping.

Guys I will request you all to practice whatever we have learnt today. You will get the code file of this in our description box.

If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to solve your query.

We will meet in the next segment where we will see other jQuery HTML methods which we have not covered in still, but they are independent and useful, that we will learn in the next segment.

So we will meet in the next segment. Thank you.