Modifying Elements

Expert-Level Explanation

Once elements are selected, they can be modified using various properties and methods. You can change text content with,.innerText or .textContent, HTML content with.innerHTML, and style with.style. You can also add, remove, or toggle CSS classes using.classList.

Creative Explanation

Modifying elements in the DOM is like customising a car. Changing.innerText is like repainting the car, .innerHTML is like modifying the interior, and .style is like adding custom modifications. Using .classList is like adding or removing stickers.

Practical Explanation with Code

const title = document.getElementById('title');
title.innerText = 'New Title'; // Changes the text of the title
title.style.color = 'blue'; // Changes the color of the title
title.classList.add('new-class'); // Adds a new CSS class to the title

Real-world Example

Think of a bulletin board where you can change notices (.innerText), add decorative elements (.innerHTML), paint it a different colour (.style), or add or remove category tags (.classList).