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. Find out the font color of the first paragraph:

   $('p').css('color');

3. Set font color of all paragraphs to "#ff0000":

   $('p').css('color', '#ff0000');

   Notice that a jQuery object is returned from the previous statement. This returned jQuery object is what allows you to "chain" methods together to perform sequential operations on the same selection.
4. Get the value of the id attribute for the first paragraph:

   $('p').attr('id');

5. Change the value of the id attribute for the paragraph that currently has an id with a value of "introduction".

   $('p#introduction').attr("id", "first-paragraph");

6. Confirm that the id of the first paragraph has been changed:

   $('p').attr('id');

7. Change the inner HTML of the h1 element:

   $('h1').html('Fun with jQuery');

   Note that if there were multiple h1 elements on the page, they would all get this new inner HTML.
8. Get the inner HTML of the first paragraph:

   $('p#first-paragraph').html();

9. Get the inner text of the first paragraph:

   $('p#first-paragraph').text();

   Notice the nested tags are not included in the text.
10. Try out some other Getter and Setter methods on your own!