Common DOM Interactions

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.

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.

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.

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.

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
• innerHTML
• Inline style
• classList