jQuery: Dom Manipulation

This entry is part 12 of 33 in the series jQuery Tutorial

After selecting an element in the DOM, we can manipulate the DOM in a certain way.

There are 2 types of things that we will want to do after selecting the element.  We could modify the content inside the elements or we could retrieve the information from the elements.

A few of these methods—such as .attr().html(), and .val()—also act as “getters,” retrieving information from DOM elements for later use.

<!doctype html>
    <title>addClass demo</title>
    <script src='//code.jquery.com/jquery-1.10.2.js'></script>
        p {
            margin: 8px;
            font-size: 16px;
        .selected {
            color: blue;
        .highlight {
            background: yellow;




Try The Code

The <p> elements were first formed without any CSS formating.  We put the <script> near the end of the page just so that when the addclass is called, the <p> elements are ready in the document for changing.

Else, we can use the document ready method to ensure that the <p> elements have been formed before the <script> is ran.

Series Navigation<< jQuery: The different types of events
jQuery: 2 DOM manipulation examples >>