Changing Content and Style0%
Handling Events: click, input, submit

Changing Content and Style

Beginner12 min read•Updated: Jul 11, 2026
Study Materials

Changing Content and Style with JavaScript

Once an element is selected from the DOM, JavaScript can dynamically alter its text content, inject HTML markup, manipulate CSS styles, and add/remove CSS classes to create engaging user experiences.

1. Changing Text & HTML Content

JavaScript provides three distinct properties for updating content:

PropertyBehaviorSecurity Risk
textContentSets or returns the plain text; ignores HTML tags100% Safe (No XSS)
innerTextSimilar to textContent, but respects CSS visibilitySafe
innerHTMLParses string as HTML, inserting tags into the DOMXSS Risk! (Caution)
JavaScript
const heading = document.querySelector("#title");
const container = document.querySelector(".card");
 
// 1. Updating text safely (Recommended for text):
heading.textContent = "Welcome to MSK Coding Bootcamp!";
 
// 2. Injecting HTML structure:
container.innerHTML = `
<div class="badge">New</div>
<p>Course enrollment is now open!</p>
`;
Important Warning
[!CAUTION] Cross-Site Scripting (XSS) Warning: Never assign unsanitized user input directly to innerHTML! Malicious users can inject <script> tags or inline SVG exploit handlers. Always use textContent when displaying user input.

2. Manipulating Inline CSS Styles (element.style)

You can modify CSS styles directly using the .style property. CSS properties with hyphens (background-color, font-size) are written in camelCase in JavaScript:

JavaScript
const banner = document.querySelector("#banner");
 
banner.style.backgroundColor = "#1e293b";
banner.style.color = "#ffffff";
banner.style.fontSize = "24px";
banner.style.padding = "16px 24px";
banner.style.borderRadius = "12px";

3. The Superior Approach: Manipulating CSS Classes with classList

Changing individual inline styles with .style leads to messy JavaScript. The professional approach is to define styled classes in CSS and toggle them using classList:

JavaScript
const alertBox = document.querySelector(".alert");
 
// 1. Add one or more classes:
alertBox.classList.add("alert-success", "fade-in");
 
// 2. Remove a class:
alertBox.classList.remove("alert-warning");
 
// 3. Toggle a class (Adds if absent, removes if present!):
// Perfect for Dark Mode toggles and Hamburger menus!
alertBox.classList.toggle("dark-mode");
 
// 4. Check if element contains a class (Returns true/false):
if (alertBox.classList.contains("dark-mode")) {
console.log("Dark theme is active!");
}

4. Manipulating Attributes: setAttribute and getAttribute

JavaScript
const userAvatar = document.querySelector("#avatar");
 
// Get an attribute value:
console.log(userAvatar.getAttribute("src")); // "images/default.png"
 
// Set or change an attribute value:
userAvatar.setAttribute("src", "images/sumit_profile.jpg");
userAvatar.setAttribute("alt", "Profile photo of Sumit");
 
// Or use direct property shortcuts:
userAvatar.src = "images/sumit_profile.jpg";
Interactive Quiz

Practice Quiz

Question 1
Which property should you use to update plain text content safely without risking Cross-Site Scripting (XSS) vulnerabilities?
Question 2
How is the CSS property background-color written when setting styles via JavaScript (e.g. el.style....)?
Question 3
What does element.classList.toggle("active") do?
Question 4
Why is adding/removing CSS classes via classList preferred over writing individual styles with element.style?
Question 5
What method checks whether an element currently has a specific CSS class applied?
Next Lesson

Handling Events: click, input, submit

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Selecting Elements: getElementById, querySelectorHandling Events: click, input, submit

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext