Updating Page Content with JavaScript

After selecting elements and responding to user events, you can update the page dynamically using JavaScript.

To change text, use the textContent property.

const title = document.querySelector("h1");

title.textContent = "New Title";

This replaces the text inside the element.

To change styles, use the style property.

title.style.color = "blue";

To add or remove classes:

title.classList.add("active");
title.classList.remove("active");

Example combining everything:

const button = document.querySelector(".btn");
const title = document.querySelector("h1");

button.addEventListener("click", () => {
  title.textContent = "Clicked!";
});

JavaScript updates the interface based on user actions, which is the foundation for building dynamic applications.

In the example below, a button changes the text and style of a message when clicked.

How It Works

JavaScript first selects the paragraph and button using querySelector().

const message = document.querySelector(".message");
const button = document.querySelector(".btn");

Then it listens for a click on the button.

button.addEventListener("click", () => {

When the button is clicked, JavaScript updates the paragraph text with textContent and adds a new class with classList.add().

message.textContent = "The content has been updated";
message.classList.add("highlight");

This changes both the content and the appearance of the element.

JavaScript can update text, styles, and classes based on user actions, which is one of the key ideas behind dynamic web applications.