jQuery clone() Method

Hello guys ,

Welcome to our series jQuery. Our last segment was on how to wrap elements, from outer side, inner content, all elements together and  unwrap selected elements from their parents elements with help of jQuery.These four methods we learned from last segment.

Let’s start,today's segment is the last segment of jQuery’s HTML Module. So,in today’s method, we have covered all methods that can be club,like there are four methods in Wrap,three methods for HTML,and three or four methods for element creation or removal. Same as today's method. It means every method is used for different things. We will cover a total of three or four segments in today's video.

Let’s go ahead towards our methods that are very useful in HTML manipulation, but these are single methods.

The first method is the clone method. Basically clone’s meaning is to create or present a person the same as you. For example ,if you have ever seen jokers in a circus. If there are two jokers whose dress, makeup & color are same then you will see those are same or you can say they are “clone” of each other.if you see two babies same then they are not clone they are twins because they have some minor differences, so we have clone method not twins method. Clone method means to create a replica of an existing thing, this is the use of clone method.this is the use of clone method.  What does the clone method do?

 As  I told you that “it makes copies of a set of matched elements” means a copy will be created of the element on which we have applied the clone method.

”It also makes copies of their child nodes, texts and attributes” means it’s not only creating copies of child elements. If we added any class,attribute  or any other content that will also be added in the clone method. As what we write in the clone method exactly the same will be our clone.

Now ,what is the work of the clone method? The answer is “the clone method is a convenient way to duplicate elements on a page”. It means if we already have elements on a web page and we want to create a copy of that web page element then the clone method is a convenient way. It is definitely convenient,  suppose we have a Div in which we have three P tags that means they are child's of DIV, then copy of these child tags will also created.it means if we have three P tags then there will be copy of each P tag,so there will be total six P tags in our document or page. So the conclusion is that if we cloned parent elements that means its child elements will be automatically cloned.

Now we will learn how to use the clone method? So the selector we took P, class, ID anything, dot clone. In clone you can see parameters are true or false. Here the default parameter is false. Here the meaning of false is the event handlers are  not to be copied & true meaning is that the event handlers are to be copied. Let’s clarify it, suppose we choose a button & we attached an event  with it then there be two situation If  we took true in parenthesis the event will also be copied,  second thing we took input, in input there is any event handler file like on click,on blur or any other mouse and keyboard related work and passed this input with event file then it will also be cloned,then we will write explicitly true to pass True. If it doesn't pass,true then we will not write anything.Or we will write explicitly false.

Let’s move towards an example and see what we can do here. So like we always perform examples on button click so here too on button click we will take one P tag and we will clone it. Now you will think that why we should use “append To”,we use “append to” to save our cloned tag in the body. The append To is used for allocation of cloned data. If we want to add cloned data in specific Div then we will use the Div name after append To. It means we will have to pass and decide where to place and where to add data after cloning.

So lets say I am opening sublime text….and creating a program for it to understand it better. So HTML, example clone….. Here will come our library…., the script which we will write here. Basically, (5 seconds pause, typing) we will write a document… dot.. ready… function, this much we used to write. With this if we want to generate class then we can do that too. For now I am not doing it. Mine will be… an example of a clone… and here is our button which we always take ID…. btn ….click. Now we take a P tag, let’s say in this P tag I write “this is…. learnvern” and another P tag…. “learnvern is an…. awesome place to learn…. jQuery.”

So basically what I did is, I have to add a style here so that my content will be in the center, so…. body text align center. I will save this program…. inside jQuery inside programs and clone methods. So basically what I did in this program is, I have given a heading here, button, and two P statements. Let’s say I move this button from here, and keep it on end. And we have taken a button so we will define the click event of the button too. Dollar… hashtag ….button…. dot click… function and here if I run this program, I haven’t written any event on button yet so nothing will happen. Okay.

So here you can see an example of a clone…. and two statements. Right now clicking will do nothing. But I want onclick of these two P statements, P tags “this is learnvern” and “learnvern is an awesome place”, so these both will be created as a copy and will be shown to me. So what will I do? On my button click I will write dollar P…. What will P do? I have two P’s currently in my program so both P tag dot…clone…  will create a copy. Now the copy has been created , I will save it and refresh and click.

So you can see nothing happening here. That's because we have not decided where to place it. . So after clone… dot… appendTo… means where to show, so I want  to show inside my body tag. I want to add it inside the body tag,  so I will use append to. Save. Reload. Click. So you can see as I clicked both these statement copies are created. But one more thing, if I click again then in my document I don’t have two P tags, now I have four P tags in my document. One, two, three, four so if I create a copy now, I will not get two but four copies of P tag. So you can see this was created before and this was created later on, so here you can see my function how it works?

My clone function will clone the P tag in my current document, so if I do this then one will create two, then two to four, and four to eight. Like this it is growing exponentially here. One, two, four, eight, sixteen like this. So if you use this here, then you have to use logic too like the requirement you have on the basis of that you have to create logic for that and how you are making it.

So this was our clone. The things to remember in a clone are after cloning where you want it should be decided.  Let’s say I create a DIV here. I am not keeping anything inside DIV and I want that inside DIV this should “append. So save, reload, when I click it gets appended in DIV and when I click again it is getting appended in that DIV only.

Now if I keep two DIV instead of one and reload then what will happen? Ideally in both DIV the copies should be generated, so clicking it four times at first only  means this one is for first DIV and this is for second DIV copy. Now if I click then in the first and second DIV more t six copies should be created. So click so you can see why six copies? Because in my documents a total of six P tags were available,  that's why. So almost fourteen tags are generated here.

So when you are working with a “clone'' you have to remember how to apply it, and how to create clones. Here we saw two ways to generate in two DIV’s,  now according to your requirement you can use it.

That’s all for the clone() method. So guys, in this segment only this much. We will see you in the next segment where we will continue this topic only and the rest methods which are remaining in this topic we will see. So see you in the next video after the same segment. Thank you.