The jQuery API .clone() allows you to create a deep copy of the element(s) specified in the selector. By saying deep copy, we mean that it will copy the elements that match the selector, as well as the descendant elements of that element(s).

When using .clone(), you must instruct the browser where to place the cloned copy. This means that you must combine .clone() with some other method that instruct the browser where to place the copies.

Also remember that the original element will remain on the page.


In the example, the entire contents of the element with #todaysInfo will be copied and added on to the end of every element of class="addBox".

<p id="todaysInfo">4.128%</p>
<div class="rateBox">
    <h3>Today's Rate:</h3>

Result of the script


Today's Rate:


Note how when you use clone, the original element is still there and you must tell the browser where to put the clone in the script.