Modify Elements

Relax. We'll talk through this in plain words — no textbook voice.

Once you've selected an element, you can change its content and style.

• element.innerHTML: the HTML content inside the element

• element.innerText: the text content inside the element

• element.style.property: change a CSS style

• element.setAttribute('attribute', 'value'): set or change an attribute

javascript

// Assume HTML: <p id="message">Old Text</p>
const messageEl = document.getElementById("message");

// Change content
// messageEl.innerHTML = "<strong>New Text!</strong>";

// Change style
// messageEl.style.color = "cyan";
// messageEl.style.fontSize = "24px";

You should see

(The text of the p element on the HTML page changes to 'New Text!' and its color and font size change)