Changing the page (DOM)

What you'll learn

How to change text, attributes and CSS classes, and how to add or remove elements.

Why it matters

A page that never changes is just a document. Updating content after something happens is what makes it feel alive.

Explanation

The DOM (Document Object Model) is the browser's live version of your HTML. jQuery methods let you read and change it.

Common methods:

• .text("hi"): set plain text. .text() reads it.
• .html("<b>hi</b>"): set HTML.
• .attr("src", "pic.png"): set an attribute.
• .addClass("on"), .removeClass("on"), .toggleClass("on")
• .append(x), .prepend(x): add inside an element.
• .remove(): delete it.

Most setter methods return the selection, so you can chain them: $("p").addClass("big").text("Hi").

Example

Step-by-step walkthrough

1. $("#msg").text(...) replaces the text, and .addClass("big") (chained) applies the style.
2. append adds a new list item at the end, prepend at the start.
3. The list now reads Zero, One, Two.

Try it yourself

Add a third item, and remove the first one with $("#list li").first().remove().

Change the DOMjQuery

Editable code<style> .big { font-size: 28px; color: royalblue; } </style> <p id="msg">Original text</p> <ul id="list"><li>One</li></ul> <script> $(function () { $("#msg").text("Changed by jQuery").addClass("big"); $("#list").append("<li>Two</li>"); $("#list").prepend("<li>Zero</li>"); }); </script>

Run ResetCopyCtrl+Enter to run

Common mistakes

• Using .html() with user input, which can open the door to script injection. Prefer .text().
• Forgetting that .text(...) replaces everything inside the element.
• Selecting after removing an element: it is gone.
• Mixing up .attr() and .prop() for form state. Use .prop("checked") for checkboxes.

Quick quiz

Summary

• .text(), .html(), .attr() read and change content and attributes.
• .addClass(), .removeClass() and .toggleClass() manage styling.
• .append(), .prepend(), .remove() change the tree; chain methods for short code.

Next: reacting to clicks and other events.

<style>
  .big { font-size: 28px; color: royalblue; }
</style>

<p id="msg">Original text</p>
<ul id="list"><li>One</li></ul>

<script>
  $(function () {
    $("#msg").text("Changed by jQuery").addClass("big");
    $("#list").append("<li>Two</li>");
    $("#list").prepend("<li>Zero</li>");
  });
</script>