Update Text and Attributes

textContent writes text into an element without interpreting it as HTML. A mark display can safely show a student's supplied text, while attributes describe properties such as an accessible label.

Before this topic, review Find a Document Element if its terms are unfamiliar.

This is JavaScript in a browser. Read the initial values, then follow each operation to its displayed result. A declaration names a value, a function call performs an operation, and console.log displays its arguments.

Create this markup in a separate index.html, then place the JavaScript in a script after these elements. Use this isolated practice page so the selectors refer to its markup.

<p id="marks">Pending</p>

JavaScript doesn’t just react to user input—it actively changes what users see and interact with on a page. From updating simple text to replacing entire HTML blocks, JavaScript has the tools to dynamically shape your content. This tutorial walks you through how to modify text, HTML, and attributes using JavaScript, with hands-on examples and beginner-friendly explanations.

Let’s start by modifying plain text inside HTML elements. JavaScript offers two key properties:

• innerText: Gets or sets the visible text (takes styles like display: none into account).
• textContent: Gets or sets all text content regardless of styling or visibility.

document.getElementById("greeting").innerText = "Welcome to the DOM!";

Suppose your HTML looks like:

<p id="greeting">Hello, World!</p>

After the script runs:

<p id="greeting">Welcome to the DOM!</p>

To modify not just text but the actual structure inside an element (including nested tags), use innerHTML.

document.getElementById("box").innerHTML = "<strong>This is bold text!</strong>";

HTML before:

<div id="box">Old content here</div>

HTML after:

<div id="box"><strong>This is bold text!</strong></div>

If you're dealing with forms or input fields, the value property is what you’ll use to set or get the user’s input.

document.getElementById("nameInput").value = "John Doe";

Input field before:

<input type="text" id="nameInput" value="" />

Input field after:

<input type="text" id="nameInput" value="John Doe" />

JavaScript can also manipulate attributes like src, href, alt, title, etc., using these methods:

• setAttribute(name, value): Adds or updates an attribute.
• getAttribute(name): Retrieves an attribute's value.
• removeAttribute(name): Deletes the specified attribute.

Example: Changing Image Source

document.getElementById("myImage").setAttribute("src", "new-image.jpg");

Before:

<img id="myImage" src="old-image.jpg" />

After:

<img id="myImage" src="new-image.jpg" />

Sometimes, you want to change how an element looks or behaves by modifying its class attribute.

Replace all classes

document.getElementById("card").className = "card active";

Add/Remove individual classes

const card = document.getElementById("card");
card.classList.add("highlight");
card.classList.remove("disabled");

Toggle class

card.classList.toggle("hidden");

<button onclick="updateMessage()">Click Me!</button>
<p id="message">Original Message</p>

<script>
  function updateMessage() {
    document.getElementById("message").innerText = "You clicked the button!";
  }
</script>

Expected Output after button click:

<p id="message">You clicked the button!</p>

• Prefer textContent when you don’t want HTML tags to be parsed.
• Use innerHTML cautiously — injecting raw HTML can pose security risks (XSS).
• Use classList over directly assigning className for safer class management.
• Cache element references if you're modifying the same element multiple times.

Modifying content using JavaScript is central to building interactive webpages. Whether it's updating plain text, injecting HTML, altering form values, or changing image sources and classes—JavaScript gives you full control. Mastering these techniques lets you create dynamic, responsive, and user-friendly experiences.

Next, we’ll dive deeper into DOM traversal and node manipulation to help you understand how to navigate and manage entire document structures dynamically.

innerHTML parses markup and is unsafe with untrusted content. Replacing an element's text also removes its existing child content.

Your task: Replace '72' with '80'. Predict the result before running the edited program.

The source is repeated here. If the edit targets the HTML rather than the script, use the markup repeated below; the worked answer also repeats the changed markup.

Markup used by this section:

<p id="marks">Pending</p>

The assigned text is different, and reading textContent confirms the update.

Markup for this edited program:

<p id="marks">Pending</p>

Markup used by this section:

<p id="marks">Pending</p>

textContent writes text into an element without interpreting it as HTML. A mark display can safely show a student's supplied text, while attributes describe properties such as an accessible label.

Check your variation against this explanation: The assigned text is different, and reading textContent confirms the update.

Use the JavaScript array reference library for individual array operations and boundary tests to check a rule independently.