Modifying Elements

In JavaScript, you can modify existing HTML elements dynamically to change their content, attributes, and styles. This allows pages to update without reloading.

Common Ways to Modify Elements

• Change content: Modify text or HTML inside an element.
• Update attributes: Change element attributes like src, href, or class.
• Modify styles: Adjust inline CSS styles dynamically.

1. Changing Content

Use textContent to change plain text or innerHTML to include HTML markup inside an element.

const para = document.querySelector('p');

// Change plain text
para.textContent = 'Hello, updated text!';

// Change with HTML
para.innerHTML = 'This is bold text!';

2. Updating Attributes

Modify element attributes using setAttribute() or direct property access.

const img = document.querySelector('img');

// Using setAttribute
img.setAttribute('src', 'new-image.png');

// Using property
img.alt = 'Updated description';

3. Changing Styles

Inline styles can be changed via the style property.

const box = document.querySelector('.box');

// Change background color
box.style.backgroundColor = 'lightblue';

// Adjust width
box.style.width = '200px';