# Common DOM Interactions

Once you have an element, you change its text with textContent, its HTML with innerHTML, its look with style, and its CSS classes with classList.

Apprentice · JavaScript · Updated October 29, 2026

## After this lesson you can

- Change an element's text with textContent, or its HTML with innerHTML
- Change an element's look with the style property and with classList add, remove and toggle

## Key takeaways

- textContent sets an element's text exactly as written, so a tag in the string shows as plain text.
- innerHTML reads the string as HTML, so tags like strong become real elements. Never give it text a user typed.
- element.style sets one inline style. A CSS name with a hyphen becomes camelCase, so background-color is backgroundColor.
- classList.add, remove and toggle change one CSS class and leave the element's other classes alone.

Once you've found an element, these are the changes you'll make most often: its text, its HTML, its inline styles and its CSS classes. Each example finds the element with the id `target` first.

## Changing Text

Change the text of a paragraph.

```javascript
const element = document.getElementById("target");
element.textContent = "New random quote of the day";
```

`textContent` shows the string exactly as written. If it holds a tag like `<strong>`, the page shows the tag as text instead of making the words bold.

## Add HTML

Replace the contents of an element with new HTML.

```javascript
const element = document.getElementById("target");
element.innerHTML = "<strong>New bold text</strong>";
```

`innerHTML` reads the string as HTML, so `<strong>` becomes a real element. That's why you never give `innerHTML` text a user typed: their text would run as HTML on your page. For text, use `textContent`.

## Change Inline Styles

Add or change inline styles while the page is open.

```javascript
const element = document.getElementById("target");
element.style.color = "maroon";
element.style.backgroundColor = "khaki";
```

A CSS property with a hyphen, like `background-color`, is written in camelCase in JavaScript: `backgroundColor`. A hyphen would read as a minus sign.

## Add/Remove CSS Classes

Add or remove CSS classes while the page is open.

```javascript
const element = document.getElementById("target");

// add a new class
element.classList.add("highlight");

// remove a class
element.classList.remove("hidden");

// toggle adding/removing a class
element.classList.toggle("active");
```

Each of these changes only the class you name, and leaves the element's other classes alone. `toggle` adds the class when the element doesn't have it, and removes it when it does.

## Check yourself

2 questions to try on the lesson page.

## So what

Text, styles and classes are how a page reacts to the person using it, and a class from your stylesheet is usually the cleanest way to change how something looks.

## Key terms

- [textContent](https://www.ask-codey.com/glossary/textcontent)
- [innerHTML](https://www.ask-codey.com/glossary/innerhtml)
- [Inline style](https://www.ask-codey.com/glossary/inline-style)
- [classList](https://www.ask-codey.com/glossary/classlist)

Source: https://www.ask-codey.com/lessons/working-with-elements-common-dom-interactions