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. In fact, whenever elements can be copied to enhance a page visually, it’s a good opportunity to do it with code. After all, why write something twice and double our chance of error when we can write it once and 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 with the 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...