Click here to check my latest exciting videos on youtube
Search Mallstuffs

Flag Counter
Spirituality, Knowledge and Entertainment


Locations of visitors to this page


Latest Articles


Move to top
Cloning HTML Elements using jquery
Posted By Sarin on Dec 21, 2012     RSS Feeds     Latest Hinduism news
7310 Views

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  ()  $('div.chapter p:eq(2)').clone().insertBefore('img');
);

You can test all the above code in the below fiddle


Demo:
Note: Images used on this website are either a production of Bhaktivedanta Book Trust(https://www.krishna.com), Iskcon Foundation or were found in google search under "Free to use and share". If any of the images presented here violates copyright issues or infringes anyone copyright or are not under "Fair use", then please bring it to our notice. Read Disclaimer for more.

Share this to your friends. One of your friend is waiting for your share.
Related Articles
Science in Hinduism-Theory of perception
Appending Html elements or contents dynamically
Science in Hinduism-Gravitational force and repulsive force
Generation and use of electricity in vedic era
Changing CSS Properties of HTML element using JQuery
Playing with HTML using Jquery
Select Groups of similar elements using position selector
Add, remove or toggle class of HTML control using jquery.
Replacing and removing HTML Elements
Select range of HTML elements using Jquery slice function

Post Comment