JavaScript Modifying Content
Text, HTML, and Attributes

Introduction to Modifying Content with JavaScript

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.

Modifying Text Content – innerText and textContent

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:

Welcome to the DOM!

Replacing HTML Content – innerHTML

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:

This is bold text!

Changing Input Field Values – value

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:

Modifying HTML Attributes – setAttribute, getAttribute, and removeAttribute

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:

Advanced: Updating Classes with className and classList

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");

Live Example: Button Click to Change Content

<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:

You clicked the button!

Best Practices for Content Manipulation

• 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.

Summary

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.