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 likedisplay: noneinto 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
textContentwhen you don’t want HTML tags to be parsed. - Use
innerHTMLcautiously — injecting raw HTML can pose security risks (XSS). - Use
classListover directly assigningclassNamefor 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.
Next Topic ⮕JavaScript Remove All Links from the Document
Sign in with Google
Comments
Loading comments...