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!