Modifying Elements

Beginner ~20 min read

Changing HTML Content

The easiest way to modify the content of an HTML element is by using the innerHTML property.

innerHTML: Gets or sets the HTML content (including tags).
innerText: Gets or sets the visible text content.
textContent: Gets or sets the text content (including hidden text).

HTML

CSS

<h2>Content Demo</h2>
<p id='p1'>Original Text</p>
<p id='p2'>Original <strong>HTML</strong></p>
<button onclick='changeContent()'>Change Content</button>

Changing CSS Styles

You can change the style of an HTML element using the style property.

element.style.property = "value";

Note: CSS properties with hyphens (like background-color) are written in camelCase in JavaScript (backgroundColor).

HTML

CSS

<h2>Style Demo</h2>
<div id='box' style='width: 100px; height: 100px; background: red;'></div>
<br>
<button onclick='changeStyle()'>Change Style</button>

Changing Attributes

You can change element attributes like src, href, alt, etc.

element.attribute = value (Direct property access)
element.setAttribute(name, value) (Method)
element.getAttribute(name) (Get value)

HTML

CSS

<h2>Attribute Demo</h2>
<img id='myImage' src='https://via.placeholder.com/150/FF0000/FFFFFF?text=Red' alt='Red Image'>
<br><br>
<button onclick='changeImage()'>Change Image</button>

Class Manipulation

The classList property is the best way to add, remove, or toggle CSS classes.

element.classList.add("class")
element.classList.remove("class")
element.classList.toggle("class")
element.classList.contains("class")

HTML

CSS

<h2>ClassList Demo</h2>
<style>
  .highlight { background-color: yellow; color: black; padding: 10px; }
</style>
<p id='text'>Click the button to toggle class</p>
<button onclick='toggleClass()'>Toggle Highlight</button>

Summary

Use innerHTML to change HTML content.
Use style.property to change inline styles.
Use setAttribute or direct property access to change attributes.
Use classList to manage CSS classes efficiently.

Quick Quiz

Which property is used to change the background color in JavaScript?

style.background-color

style.backgroundColor

style.bgColor

css.background

Previous Selecting Elements

Next Creating Elements

Changing HTML Content

Changing CSS Styles

Changing Attributes

Class Manipulation

Summary

Quick Quiz

Enjoying these tutorials?