Change HTML & CSS with JavaScript

With JavaScript, you can dynamically change HTML content and CSS styles on your webpage — without reloading the page. This is the foundation of creating interactive web applications.

1. Changing HTML Content (Text or Tags)

You can use textContent, innerHTML, or innerText to change an element’s content.

Example:

<h1 id="heading">Welcome!</h1>
<button onclick="changeHeading()">Click Me</button>
<script>
function changeHeading() {
document.getElementById("heading").textContent =
"Hello,
JavaScript!";
}
</script>

Output

The <h1> text changes to: Hello, JavaScript!

2. Change HTML Using innerHTML

document.getElementById("heading").innerHTML ="<span
style='color:red'>Changed!</span>";

Use this when adding HTML tags (not just plain text).

3. Changing CSS Styles with JavaScript

You can directly change CSS styles using .style.property.

Example:

<p id="para">Style me!</p>
<button onclick="styleParagraph()">Style</button>
<script>
function styleParagraph() {
const p = document.getElementById("para");
p.style.color = "blue";
p.style.fontSize = "24px";
p.style.backgroundColor = "#f0f0f0";
}
</script>

4. Add or Remove CSS Classes Dynamically

HTML + CSS:

<style>
.highlight {
color: white;
background-color: green;
padding: 10px;
}
</style>
<p id="text">Toggle my style!</p>
<button onclick="toggleHighlight()">Toggle</button>
<script>
function toggleHighlight() {
document.getElementById("text").classList.toggle("highlight");
}
</script>

classList.toggle() adds the class if it's missing and removes it if it exists.

5. Real-World Use Case: Show/Hide Content

<div id="box" style= "display: none;">Hello, I'm visible now!</div>
<button onclick= "toggleBox()">Show/Hide</button>
<script>
function toggleBox() {
const box = document.getElementById("box");
box.style.display = box.style.display === "none" ? "block" :
"none";
}
</script>