Cloning HTML Elements using jquery
Using Jquery, we usually create new elements, remove elements, move elements from one place to another in the same document, append elements etc. But sometimes, we may want to copy the same element at many places in the document. For example, navigation at the top of the page can be copied at the bottom of the page. Instead of duplicating the HTML code, it’s a good thing to copy the element using the jquery function. This reduces the chances of duplicating the error associated with the existing code.
Cloning Elements
We can use the JQuery clone () function to copy an element and duplicate it anywhere in the page.
Using clone () to replace element
Suppose on click of a button, you want to add an image to each <p>. You can achieve this functionality as
HTML
<img src = "images/home.gif" />
<div class="chapter">
<p>Put an image after this line.</p>
<p>Put an image after this line.</p>
<p id="here" style='Background:red'>Put an image after this line.</p>
<p>Put an image after this line.</p></div>
<input id="Submit1" value="insert after paragaraph" type="submit">
Jquery
$("#Submit1").click(function () $("img").clone().insertAfter("p");
);
In the above chunk of code, we are inserting the image element after each <p> element.
The above piece of code only copies the HTML element but not its associated events. i.e. If the image has any event attached to it, it will not be reflected in the copied image. For Ex: if an image has a mouseover event and if you clone that image, then mouseover event will not be raised for the cloned image element.
Cloning element while retaining its Events
To retain the events associated with the element (to be cloned), we must add the true parameter to the clone function. On adding the true parameter, element along with its associated events will be cloned.
$("#Submit2").click(function () $("img").clone(true).insertAfter("p");
);
This code will copy the image along with its events (If any) after each paragraph element.
i.e. <Img> is replaced after each <p>.
By default, clone method copies not only the matched element, but also all its descendant elements. If you don’t want to copy its descendants then add a false parameter to the clone function as shown below.
$("#Submit2").click(function () $("img").clone(false).insertAfter("p");
);
Cloning element and hide original element
Sometimes, you may want to clone an element at multiple places in your document. In addition to this, you may want to remove the element which was cloned from its actual position. This can be achieved as
HTML
<p>Put an image after this line.</p>
<p>Put an image after this line.</p>
<p id="here" style='Background:red'>Put an image after this line.</p>
<p>Put an image after this line.</p></div>
<input id="Submit4" value="insert before here and hide" type="submit">
Jquery
<img src = "images/home.gif" />
$("#Submit4").click(function () $('img ').clone().insertBefore('#here').end().hide();
);
This code will clone the element just before paragraph element with id ‘Here’ and will hide the image element at the top of the document
Cloning element with advanced selectors
Below code will move the third paragraph inside div element before the topmost image element.
$("#Submit5").click(function