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
).