Copying elements

So far in this chapter, we have inserted newly created elements, moved elements from one location in the document to another, and wrapped new elements around existing ones. Sometimes, though, we may want to copy elements. For example, a navigation menu that appears in the page's header could be copied and placed in the footer as well. Whenever elements can be copied to enhance a page visually, we can let jQuery do the heavy lifting.

For copying elements, jQuery's .clone() method is just what we need; it takes any set of matched elements and creates a copy of them for later use. As in the case of the $() function's element creation process we explored earlier in this chapter, the copied elements will not appear in the document until we apply one of the insertion methods.

For example, the following line creates a copy of the first paragraph inside <div class="chapter">:

$('div.chapter p:eq(0)').clone(); 

This alone is not enough to change the content of the page. We can...