Experimenting with DOM Manipulation in jQuery

This demo is your chance to try out some of jQuery's DOM manipulation methods.

Follow these steps to get started:

1. Open the JavaScript Console in your browser.
2. Select the h1 element and append it to each of paragraphs:

   $('h1').appendTo('p');

   Notice that the original h1 is removed. It is taken from its original location and move to one or more other locations.
3. Clone the first h1 element and place the cloned copy at the beginning of the body element:

   $('h1:first').clone().prependTo('body');

   Notice that when cloning, the original h1 remains in place.
4. Replace each h1 element in your document with an h2 element:

   $('h1').replaceWith('<h2>The New H2</h2>');

5. Replace the h2 elements with h3 elements, this time using replaceAll():

   $('<h3>New H3</h3>').replaceAll('h2');

6. Try out some other Remove and Copy methods on your own!