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. Add content to the end of each li element:

   $('li').append('Great Fun!');

3. Add a new paragraph after each p element:

   $('p').after('<p>This is a new paragraph!</p>');

4. Guess what will happen if you re-run the last statement now. Try it out to see if you're right.
5. Add three new class attributes to the ol element:

   $('ol').addClass('error warning danger');

6. Get the value of the ol element's class attribute to confirm that it was changed:

   $('ol').attr('class');

7. Add another class to the ol element.

   $('ol').addClass('cheese');

8. Get the value of the ol element's class attribute again:

   $('ol').attr('class');

   Notice that adding a new class doesn't remove classes that are already there.
9. Try out some other Setter methods on your own!